Show image under another with css Hover

Asked

Viewed 7,765 times

16

How do I make when I hover under an image, another image appears on top with opacity...

For example: I have a div with the cover image of a movie, when I move the mouse under the div, I would like to display the PLAY button.

The only related material I found on the internet was this link that teaches how to show captions under the image, which I adapted to my need.

http://www.kadunew.com/blog/css/mostrar-legenda-ao-passar-o-mouse-sobre-imagens

When I pass the mouse under the image appears the PLAY button...

However, it’s not the way I need it, as the play button appears next to the image when you load the page.

Page loaded without hovering the mouse on the image
inserir a descrição da imagem aqui

Page loaded while hovering the mouse in the image inserir a descrição da imagem aqui

<style>
.imgefeito{
    margin: 0;
    overflow: hidden;
    float: left;
    position: relative;
}
.imgefeito a {
    text-decoration: none;
}
.imgefeito a:hover {
    cursor: pointer;
} 


.imgefeito a:hover .desc{
    display: block;
    font-size: 1.2em;
    padding: 10px 0;
    color: #fff;
    position: absolute;
    bottom: 11px;
    padding: 10px;
    margin: 0;
}
</style>


<div class="imgefeito">
<a href="#">
    <img src="rrr.png" alt="Daim Graffiti" />
    <span class="desc">
        <img src="play.png" alt="Daim Graffiti" />
    </span>
</a>
</div>

Is there a way to use this code correctly, or other simpler and more objective implementation?

Play button... inserir a descrição da imagem aqui

css css3 css-hover

  • @Renan: How so...?

  • Separate where...are already 2 separate images, are you suggesting I put the play outside the div? If it is not working.

  • I edited the question, there are 2 separate images there....... be clearer if that’s not what you mean to say.

  • Now I understand, well...I put the image separates from the button at the end of the question.

  • Wouldn’t it be easier with onmousemove set Visible attribute to true?

1 answer

21


There are many ways to do it.

I would choose to put the image of play in one element ::after not to dirty the html code, because it is only a "visual" information that the element is a media content.

It would be interesting to be in html if it were something dynamic, which would need to be changed frequently. In your case it appears to be the same image for all elements, so you can create a class to group these rules in common.

I will leave two examples:

s/ change background color:

.watch {
  display: inline-block;
  height: 200px;
  position: relative;
  width: 200px;
}

.watch:hover::after {
  visibility: visible
}

.watch img {
  width: 100%
}

.watch::after {
  background: url(http://i.stack.imgur.com/Iy23q.png) no-repeat;
  background-position: 45% 55%;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 100%
}
<a class='watch' href='#'>
  <img src='http://i.stack.imgur.com/PpaYj.jpg' alt='' />
</a>

<a class='watch' href='#'>
  <img src='http://i.stack.imgur.com/zksYf.jpg' alt='' />
</a>

changing the background color:

.watch {
  display: inline-block;
  height: 200px;
  position: relative;
  width: 200px;
}

.watch:hover::after {
  visibility: visible
}

.watch img {
  width: 100%
}

.watch::after {
  background: url(http://i.stack.imgur.com/Iy23q.png) no-repeat,
              rgba(255, 255, 255, .6);
  background-position: 45% 55%;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 100%
}
<a class='watch' href='#'>
  <img src='http://i.stack.imgur.com/PpaYj.jpg' alt='' />
</a>

<a class='watch' href='#'>
  <img src='http://i.stack.imgur.com/zksYf.jpg' alt='' />
</a>

  • 1

    That’s it! Thank you so much @Renan

Browser other questions tagged css css3 css-hover

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