Overlay two images with :

Question

My goal would be for an image in . png to be above an image . jpg when passing the cursor over it. I tried with the following code:

 .image{
 width: 320px;
 height: 180px;
}

.image:hover{
content: url('playplay.png');
}

But it looks like this

When passing the cursor the jpg image disappears being replaced by png, but my goal was to have the play button on the image. The images are exactly the same size and will be in this layout (4 aligned horizontally)

Answer 1

It turns out that the way you’re doing it, at Hover, you replace the image instead of displaying the other one overlaid. You’ll need to change the structure of your html a little and add a treatment to your css.

Example

.thumbnail {
    position: relative;
    float:left;
    width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 320px;
  height: 180px;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.overlay {
  width: 100px;
  height: 100px;
  transition: .5s ease;
  opacity: 0;
  position: absolute; 
  top: 50%;
  left: 50%;  
  transform: translate(-50%, -50%);  
  background-image: url('//d30y9cdsu7xlg0.cloudfront.net/png/66410-200.png');
  background-repeat: no-repeat;
  background-size: 100px 100px;
  
}

.thumbnail:hover .image {
  opacity: .8;
}

.thumbnail:hover .overlay {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

<div class="thumbnail">
  <img src="http://www.wikiality.com/file/2016/11/bears1.jpg" alt="Avatar" class="image" style="width:100%">
  <div class="overlay">    
  </div>
</div>
<div class="thumbnail">
  <img src="https://i.imgur.com/9wdP3kK.jpg" alt="Avatar" class="image" style="width:100%">
  <div class="overlay">  
  </div>
</div>

Note: The animation strings were already in my css, if necessary I can clean the effects if it became difficult to understand.

Answer 2

I’ve made three choices for you. With Pseudo Element ::after, with Dois Backgrounds (in this option the CSS can be more extensive, but worth of reference). And I made a template with Position and alternating the z-index in the :hover

Run the Snippet to see the options.

/* com pseudo elemente ::after */
.imgafter {
    float: left;
    width: 200px;
    height: 100px;
    margin: .5rem;
    cursor: pointer;
    position: relative;
}
.imgafter:hover::after {
    content: "\25B6";
    color: limegreen;
    font-size: 5rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.img1 {
    background: url(http://fillmurray.com/200/100) no-repeat center;
    background-size: cover;
}
.img2 {
    background: url(http://fillmurray.com/300/100) no-repeat center;
    background-size: cover;
}
.img3 {
    background: url(http://fillmurray.com/300/200) no-repeat center;
    background-size: cover;
}
.img4 {
    background: url(http://fillmurray.com/200/200) no-repeat center;
    background-size: cover;
}
/* com dois backgrounds */
.imagem {
    float: left;
    width: 200px;
    height: 100px;
    background-image: url(http://placecage.com/200/100);
    margin: .5rem;
}
.imagem:hover {
    float: left;
    width: 200px;
    height: 100px;
    background-image: url(https://cdn3.iconfinder.com/data/icons/developerkit/png/Play.png), url(http://placecage.com/200/100);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%, 100%;
    cursor: pointer;
}
/* Com Position */
.base {
    width: 200px;
    height: 100px;
    cursor: pointer;
    margin: .5rem;
    float: left;
    position: relative;
    z-index: 1;
}
.base:hover .play {
    width: 50px;
    height: 50px;
    -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
    clip-path: polygon(100% 50%, 0 0, 0 100%);
    background-color: #0f0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

<h3>Com ::After</h3>
<div class="imgafter img1"></div>
<div class="imgafter img2"></div>
<div class="imgafter img3"></div>
<div class="imgafter img4"></div>

<br clear="all"/>

<h3>Com Duble Background</h3>
<div class="imagem"></div>
<div class="imagem"></div>
<div class="imagem"></div>
<div class="imagem"></div>

<br clear="all"/>

<h3>Com Position</h3>
<div class="base img1">
    <div class="play"></div>
</div>
<div class="base img2">
    <div class="play"></div>
</div>
<div class="base img3">
    <div class="play"></div>
</div>
<div class="base img4">
    <div class="play"></div>
</div>