How to prevent a hover animation from ending abruptly once I hover out?

Question

I have the following 2 classes:

.background-image {
    background-image: url('../assets/artworkNight.png');
    transition-property: background-image;
    transition-duration: 10s;
}
.background-image:hover {
    background-image: url('../assets/artworkDay.png');
}

So whenever I hover on .background-image the background begins to slowly change over the course of 10 seconds. The problem is that if I unhover the image during second 4-5, it abruptly transitions back to the original image. I was wondering if it's possible to make to transition out the same way it transitions in. For example:

If I hover for 4 seconds, then unhover, I'd want it to take 4 seconds before it completely reverts back to the original image. Is this possible with CSS?

Does this answer your question? [CSS3 background image transition](https://stackoverflow.com/questions/9483364/css3-background-image-transition) — Shashank Gb, May 05 '21 at 18:23

Justin · Answer 1 · 2021-05-05T16:49:31.157

0

Try this

#pic1 {
  position: absolute;
  width: 500px;
  height: 500px;
}
#pic2 {
  position: absolute;
  width: 500px;
  height: 500px;
  transition: opacity 10s;
}
#pic2:hover {
  opacity: 0;
}

<img src='https://static.toiimg.com/photo/72975551.cms' alt="pic1" id="pic1"/>
<img src='https://neilpatel.com/wp-content/uploads/2017/09/image-editing-tools.jpg' alt="pic2" id="pic2"/>

edited May 05 '21 at 16:49

answered May 05 '21 at 16:10

Justin

2,873
3
9
16

score 0 · Answer 2 · answered May 05 '21 at 16:11

Not really sure how to achieve this only with css other than including more elements.

Maybe this helps anyway.

.background {
  position: relative;
}

.background,
.background-image1,
.background-image2 {
  height: 400px;
}

.background-image1{
    background-image: url('https://dummyimage.com/600x400/d92ed9/d92ed9');
    position: relative;
    transition: opacity 4s ease;
}

.background-image2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://dummyimage.com/600x400/000000/000000);
  opacity: 0;
  transition: opacity 4s ease;
}

.background .background-image1:hover {
  opacity: 0;
}

.background .background-image2:hover {
    opacity: 1;
}

<div class="background">
  <div class="background-image1"></div>
  <div class="background-image2"></div>
</div>

score 0 · Answer 3 · answered May 05 '21 at 16:12

0

Try changing the transition-timing-function. These might give you what you're looking for.

transition-timing-function: ease-in-out;

Or

transition-timing-function: linear;

answered May 05 '21 at 16:12

Anthony

321
2
10

TechySharnav · Answer 4 · 2021-05-05T17:08:10.303

background-image is not an animatable property. As a workaround, you can use ::before selector, and use opacity transition between the main element and its ::before selector. Also, the requirement is satisfied with one single element.

* {
  margin: 0;
}

.background-image {
  background: url("https://cdn.pixabay.com/photo/2014/03/26/17/50/sunset-298850_960_720.jpg");
  background-size: cover;
  width: 100vw;
  height: 100vh;
  opacity: 1;
}

.background-image::before {
  content: "";
  width: inherit;
  height: inherit;
  background: url("https://cdn.pixabay.com/photo/2019/02/14/07/28/painting-3995999_960_720.jpg") no-repeat;
  position: absolute;
  transition-property: opacity;
  transition-duration: 10s;
  background-size: cover;
  top: 0;
  left: 0;
  opacity: 0;
}

.background-image:hover::before {
  opacity: 1;
}

<div class="background-image"></div>

[Animatable CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties) — TechySharnav, May 05 '21 at 16:27

How to prevent a hover animation from ending abruptly once I hover out?

4 Answers4