Transition of background image on hover not working

Question

When I put my mouse over it, the background image shows up in an instant. I want to show a gradual trasition. How can I fix this?

.category__mid {
  min-height: 260px;
  width: 200px;
  border: 2px solid #000;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(255, 255, 255, 1);
  background-blend-mode: lighten;
  transition: all 0.9s ease;
}

.category__mid:hover {
  background-color: rgba(255, 255, 255, 0);
  background-blend-mode: normal;
}

<div class="category__mid" style="background-image: url('https://i.postimg.cc/NG159gHv/pexels-kampus-production-8439682.jpg')">
  <h3>I want to show transition on hover. NOT when the user leaves</h3>
</div>

Unfortunately you can't use transition on background-image, see the w3c list of animatable properties. - https://www.w3.org/TR/css-transitions-1/#animatable-properties — Luís P. A., Oct 25 '22 at 08:49

score -1 · Answer 1 · answered Oct 25 '22 at 08:47

-1

change the css as

.category__mid {
  min-height: 260px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(255,255,255,1);
  background-blend-mode: lighten;
}
.category__mid:hover {
  background-color: rgba(255,255,255,0);
  transition: all 0.9s ease ; 
}

answered Oct 25 '22 at 08:47

Rishav

1

That doesn't help. Thanks though. – Elaine Byene Oct 25 '22 at 08:49
its working on my pc – Rishav Oct 25 '22 at 08:53

score -1 · Answer 2 · answered Oct 25 '22 at 09:01

Change the css to;

.category__mid {
      min-height: 260px;
      width: 200px;
      border: 2px solid #000;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      background-color: rgba(255,255,255,1);
      background-blend-mode: lighten;
      transition: all 0.9s ease; 
    }
    .category__mid:hover {
      animation: fade-in 0.9s ease;
      background-color: rgba(255,255,255,0);
    }
    
  @keyframes fade-in {
    0% {
      background-blend-mode: lighten;
    }
    100% {
      background-blend-mode: normal;
    }
  }

Unfortunately you can't transition the background image of a div.

but you can use an animation.

Transition of background image on hover not working

2 Answers2