Show div with enlarged image when mouse in thumbnail

Asked

Viewed 550 times

2

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

inserir a descrição da imagem aqui

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:

inserir a descrição da imagem aqui

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-->

1 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/

  • And if it’s multiple images and the div Thumb is not "daughter" of the div major?

  • @NGTHM4R3 is difficult to respond in detail to all scenarios. But show your HTML and adapt the answer.

  • 1

    Okay, I’ll update the question

  • The div "images-normal" is the div that will appear in the effect Hover and overlap the text that and when you take the mouse it some tbm, this larger div would already have a set size and the text tbm not to be disproportionate, understand...

  • @NGTHM4R3 in this case will need Javascript. Use jQuery? or native prefer?

  • What you think is best is good, I prefer CSS because I understand a little, you know...

  • And then you got?

  • @NGTHM4R3 had forgotten, sorry. A doubt in your HTML uses Ids. There will be more HTML like this or it is just an image/Thumb per page?

  • You’ll get a lot of footage...

Show 4 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.