CSS Transition on image hover not working

Question

I found this thread to have an image appear over another on hover which works great, but the transition is in an instant snap, I'm hoping to make it a smooth crossfade instead like this (I couldn't get the code there to work properly).

Tried adding 'transition: opacity 1s ease-in-out;' which doesn't work, I'm not the best at this so hoping someone could point out what's wrong please?

.imageBox {
  position: relative;
  float: left;
}

.imageBox .hoverImg {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}

.imageBox:hover .hoverImg {
  display: block;
}

<div class="imageBox">
  <div class="imageInn">
    <a href="https://amovenew.druminternet.uk/first-time-buyer/"><img class="round aligncenter" src="https://www.isbiryatak.com/wp-content/uploads/2019/04/OMURGAPOPUP_MAY19-450x281.png" />
    </a>
  </div>
  <div class="hoverImg">
    <a href="https://amovenew.druminternet.uk/first-time-buyer/"><img class="round aligncenter" src="https://i.pinimg.com/originals/2e/52/bc/2e52bc9e2b3bb786820fbfb6366dda02.jpg" />
    </a>
  </div>
</div>

It's worth mentioning that `display` is not animatable. I would recommend using `opacity`. When you invoke the `:hover` pseudoclass, the `display` is set to `block`. Since there is nothing that can be interpolated between `none` and `block`, the browser ignores the transition and proceeds immediately to the `block`. — J-Cake, Feb 27 '20 at 02:03

score 0 · Answer 1 · answered Feb 27 '20 at 01:44

0

did you try opacity 0 for display none and opacity 1 for display block along with transition property ?

If that does not work you can you animation keyframes for opacity transition.

answered Feb 27 '20 at 01:44

Harish Dhami

1,016
1
7
10

score 0 · Accepted Answer · edited Feb 27 '20 at 02:03

You have to set an opacity property before you can transition it:

.imageBox {
  position: relative;
  float: left;
}

.imageBox .hoverImg {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.imageBox:hover .hoverImg {
  opacity: 1;
}

<div class="imageBox">
  <div class="imageInn">
    <a href="https://amovenew.druminternet.uk/first-time-buyer/"><img class="round aligncenter" src="https://www.isbiryatak.com/wp-content/uploads/2019/04/OMURGAPOPUP_MAY19-450x281.png" />
    </a>
  </div>
  <div class="hoverImg">
    <a href="https://amovenew.druminternet.uk/first-time-buyer/"><img class="round aligncenter" src="https://i.pinimg.com/originals/2e/52/bc/2e52bc9e2b3bb786820fbfb6366dda02.jpg" />
    </a>
  </div>
</div>

score 0 · Answer 3 · edited Feb 27 '20 at 02:02

.imageBox>div {
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity 1s;
}

.imageBox:hover .hoverImg {
  opacity: 0;
}

<div class="imageBox">
  <div class="imageInn">
    <a href="https://amovenew.druminternet.uk/first-time-buyer/">
      <img class="round aligncenter" src="https://www.isbiryatak.com/wp-content/uploads/2019/04/OMURGAPOPUP_MAY19-450x281.png" />
    </a>
  </div>
  <div class="hoverImg">
    <a href="https://amovenew.druminternet.uk/first-time-buyer/">
      <img class="round aligncenter" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1054339559,3607230833&amp;fm=26&amp;gp=0.jpg" />
    </a>
  </div>
</div>

CSS Transition on image hover not working

3 Answers3