1

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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Dropsen
  • 45
  • 2
  • 7

2 Answers2

2

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>
PaulS
  • 850
  • 3
  • 17
0

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>
Paul Joiner
  • 65
  • 7