Show image under another with hover css

Navigation
16

How do I make the mouse pointer over an image appear with another opacity?

For example: I have a div with the cover image of a movie, when I hover 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 display captions under the image, which I adapted to my need.

  

link

When I mouse over the image, the PLAY button appears ...

However, it is not the way I need it, because the play button appears next to the image when you load the page.

Page loaded without hovering over the image

Page loaded by mouseover image 

<style>.imgefeito{margin:0;overflow:hidden;float:left;position:relative;}.imgefeitoa{text-decoration:none;}.imgefeitoa:hover{cursor:pointer;}.imgefeitoa:hover.desc{display:block;font-size:1.2em;padding:10px0;color:#fff;position:absolute;bottom:11px;padding:10px;margin:0;}</style><divclass="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 another simpler and more objective implementation?

Play button ...

    
asked by anonymous 12.10.2015 / 17:10

1 answer

21

There are several ways to do it.

I'd like to put the play image in a ::after element to avoid smudging the html code, since it's just a "visual" 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 will appear to be the same image for all elements, so you can create a class to group these rules together.

I'll 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>
    
12.10.2015 / 18:17
What is and what is the utility of the DUAL table for Oracle? What is the correct way to call C # versions?