Is there a way to set two background images on a div and have them change when hovering with a fade effect? Similar to the example shown.
.kid {
max-width:50%;
position:relative;
}
.kid img {
display:block;
opacity:1;
height: auto;
transition:.6s ease;
width:100%;
position:absolute;
z-index:12;
}
.kid img:hover {
opacity:0;
}
.kid img + img {
display:block;
opacity:1;
position:relative;
z-index:10;
}<div class="kid">
<img src="https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg" alt="Kid" itemprop="image" width="600" height="750" />
<img src="https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg" alt="Adult" width="600" height="750" />
</div>I want to achieve this effect using CSS as background-image instead of the <img> tag, since I'm working on a two-column grid gallery (50% width and 100vh) that doesn't work with <img>.
Below is my code. Any help to replicate the same hover effect from the first example would be appreciated.
body{
margin: 0 auto;
width: 100%;
height: 100vh
}
.left{
float: left;
}
.right{
float: right
}
.col-half-width{
width: 50%;
height: 100vh;
}
.project-01{
background: #ccc url('https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg') no-repeat center center;
background-size: cover;
}
.project-02{
background: url('https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg') no-repeat center center;
background-size: cover;
}
.project-01,
.project-02 img{
max-width:100%;
}<div class="col-half-width left project-01"></div>
<div class="col-half-width right project-02"></div>