Image Hover Fade Out

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 🙂 

edit .5 in above code

you can change to 2s, 3s, 10s, 100s..

2 minutes ago, tuanphan said:

edit .5 in above code

you can change to 2s, 3s, 10s, 100s..

Hi,

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

Can you share link to page where you use image? We can check easier.

47 minutes ago, tuanphan said:

Can you share link to page where you use image? We can check easier.

https://henrycaird.co/

Thank you

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: 

Just copy/paste this code:

.image-block {
transition: all .5s ease-in-out;}



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

On 9/28/2021 at 5:23 PM, dariokomazec said:

Just copy/paste this code:

 

.image-block {
transition: all .5s ease-in-out;}



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

 

Dude, you're a hero. been looking everywhere for how to do this and nothing was working. 

Just wanted to add to this:
If anyone is looking to fade/transition between two images, (using SS 7.1 + FE)
- Stack 2 images ontop of each other
- Use the code above in the custom CSS section

- If you want this to only work on one page,
- Enter the code above in the "page header code injection" section of your page. make sure to put it between <style></style> in order for it to work

Example:
<style>.image-block {
transition: all .5s ease-in-out;}

.image-block:hover {
background-color: #00000; opacity: 0; transition: all .3s ease-in-out;}</style>