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

Image Hover Fade Out


oddthing

Question

Hi,

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:

Hi,

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*/
.image-block{
  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...