Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Image Hover Fade Out




I am using the css code below to add a hover fade effect on my images. However, the images fade out very quickly.

Any idea if there is a line I can add to make it fade out slowly when the cursor is taken off the image?


.image-block:hover {
background-color: #00000; opacity: 0.6; transition: all .5s ease-in-out;}


Thank you in advance 🙂 

Link to comment

6 answers to this question

Recommended Posts

  • 0
On 8/24/2020 at 11:45 AM, oddthing said:


Yes, but for some reason this only changes the Fade In....there is no fade out when the cursor leaves the image 😕

The fade in AND out should work if you separate the two states kind of like this:

/*original state*/
  transition: .5s;

/*hover state*/
.image-block:hover {

  opacity: 0.6;


Maybe this helps you as well: 


Edited by MichGlad
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...