0

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>

Improve this question
1

2 Answers 2

Reset to default
-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 ; }
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

That doesn't help. Thanks though.
its working on my pc
-1

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.