My goal would be for a .png image to be over a .jpg image by hovering 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 for the play button to be over the image. The images are exactly the same size and will be in this layout (4 horizontally aligned)
It turns out that the way you're doing, in the hover, you replace the image instead of displaying the other overlay. You will need to change the structure of your html a bit and add a treatment in the 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 animations are already in my css, if necessary I can clear the effects if it is difficult to understand.
I made three choices for you. With Pseudo Element :: after , with Two Backgrounds (in this option the CSS can be longer, but worth referencing). And I made a template with Position and switching z-index to :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: "B6";
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>