Show div with enlarged image when mouse in thumbnail

Question

I have a div where the thumbnails ( thumbnails) of the images are shown and another div above with the text, ex:

How can I make so that when passing the mouse in the thumbnail (normal Hover effect) appears a larger div that overlaps the text and shows the image of the largest thumbnail ( that would be the normal size) and when taking the mouse from the thumbnail div hide normally, ex:

How can I do that?

HTML would look something like this:

    <div id="content">

<div id="images-normal">
<img src="#" id="normal-01" />
</div>

<p>Lorem ipsum .... </p>

<div id="images-thumb">
<img src="#" id="thumb-01" />
</div>

</div><!--content-->

Answer 1

You can do this only with CSS.

For example with this HTML:

<div class="post">
  <div class="texto">Bla bla bla</div>
  <div class="thumb"><img src="/img/logo.png" alt=""></div>
  <div class="imagem"><img src="/img/logo.png" alt=""></div>
</div>

you need to use the selector + that selects the next element like this:

.thumb:hover + div.imagem {
  display: block;
}

and that way when the .thumb receive hover then the style display: block; is applied to div.imagem.

jsFiddle: http://jsfiddle.net/vznkdhsy/

You can also use opacity instead of display thus: http://jsfiddle.net/vznkdhsy/1/