View div in Hover

Asked

Viewed 24,059 times

5

How to display a div, which will have a summary about the movie (text), and a button to (SEE MORE) while hovering the mouse over an image.

Example:

<a href="#">IMAGEM</a>

When hovering over this link, appear a div on the right side, with information about this movie.

An example of what I’m talking about is the site of Netflix or telecine play.

html css

2 answers

16


If you are going to make this HTML it is best to use only CSS.

Create a div for each link and its contents. Example:

<div class="item">
    <a href="">Ver mais</a>
    <div class="descricao">Este filme é excelente! Recomendado a todas as idades</div>
</div>

Then you can hide the description with:

.descricao{
    display: none;
}

and then make it visible when the mouse .item:

.item:hover .descricao{
    display: block;
}

Example

If you want to make the effect appear/disappear with animations you can use CSS Transitions.
Example

  • 2

    Good Sergio, so you don’t need to use Javascript :p

  • I believe that with visibility would look more elegant ;)

  • @Beet, it’s according to taste :) So I added the second example ;)

  • Just remember that this does not work in IE9 or lower. Because it does not accept pseudo-selectors when it is not the last selector.

  • @Gabrielgartz, truth. Out of curiosity I’ve been looking at statistics about IE9 and already only 3% seems to use.

  • @Sergio cool this statcounter, I did not know, is talked more as information factor even, I do not know what is the focus of the user site, but in my personal opinion should abandon the compatibility with non-modern browsers. I gave you +1 hehe, I liked your solution, just wanted to help.

  • @Gabrielgartz, yes, your comment is correct and welcome! So I also got to thinking and went looking for fresh numbers for myself too :)

Show 2 more comments

5

Something like the .show and .hide of jQuery solve this problem:

JS:

$("div.conteudo > img").hover(function() {
    $(this).next(".divDoLadoDireito").show(); //hover in
}, function() {
    $(this).next(".divDoLadoDireito").hide(); //hover out
});

HTML: 

<div id="conteudo">
  <img src="images/imagem.jpg" />
  <div class="divDoLadoDireito hide">
      <p></p>
  </div>
</div>

  • In my opinion, the best solution was indicated by Sergio, you can get the desired result only with . css jQuery and' always a dependency on your code.

Browser other questions tagged html css

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