Change background img on hover with fade effect HTML CSS - html

Question

I want to set two background images to div and then make them changing while hovering with fade effect like this.
.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>
Here it's done by putting image in html code. I have to do this in css as background-image, because I made two column grid gallery (50% width and 100vh) and it doesn't works with <img>.
Here is my code. Help me to get the same effect like in first fiddle.
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>

Answer 1

Try it using CSS :hover and transition. Note: perhaps you should preload the image so that it works smoothly on the first time aswell.
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;
transition: 0.5s;
}
.project-01:hover{
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>

Answer 2

The CSS property background-image is not animatable:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
I believe you'll have to do something much more cumbersome. We can use the opacity on a nested positioned object to get the desired effect. Any other content in the parent div will need a z-index value higher than the animated background.
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;
display: inline-block;
position: relative;
}
div.innerAnimate {
background: url('https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg') no-repeat center center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: 0;
transition: 0.5s;
}
.project-01:hover div.innerAnimate {
opacity: 1;
}
.project-01,
.project-02 img {
max-width: 100%;
}
div.innerContent {
color: white;
padding: 20pt;
position: relative;
z-index: 100;
}
<div class="col-half-width left project-01">
<div class="innerAnimate"></div>
<div class="innerContent">
<p>My content here.</p>
</div>
</div>