Show div with enlarged image when passing mouse on thumbnail

Navigation
2

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

HowcanIdothatbyhoveringthemouseinthethumbnail(normalhovereffect)alargerdivappearsthatoverlapsthetextandshowstheimageofthelargerthumbnail(whichwouldbethenormalsize)andwhiledrawingthemousefromthethumbnailtodivisnormallyhidden,eg:

HowcanIdothis?

HTMLwouldlooksomethinglikethis:

<divid="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-->
    
asked by anonymous 04.12.2015 / 19:50

1 answer

1

You can do this with CSS only.

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 so when .thumb receives hover then display: block; style is applied to div.imagem .

jsFiddle: link

You can also use opacity instead of display like this: link

    
04.12.2015 / 20:00
OkHttp only works on Lollipop Alphabetical order Ruby on Rails