Image hover Fade Transition Speed

[FW]

Hey,
I would like to know if there’s is a way to adjust the fade transition speed of the new Image Hover Add-on?
Is there a css selector for this?

Many thanks in advance

[Richard]

Dear @FW

Let me know if this suits you!
Targeting the Image-hover region with Custom CSS, which can be added to "Custom CSS & HTML" in "Lay Options"

img.lay-image-responsive.setsizes.h100.loaded {
    transition: all 8s ease 0s !important;
}

You of course will play with the exact style of transition you wish, i had set mine to 8s to exaggerate the effect, you may need to tweak this to your liking but i hope it sets you in the right direction,

This had my Image-hover fading in "very slowly"

All the best & let me know
Good luck on your Lay Theme Journey

Sincerely
Richard

[FW]

Thank you so much and sorry for my late reply!

[Richard]

Dear @FW

No worries! best of luck as always feel free to ask if you have any further questions :)

Sincerely
Richard

[spontans]

Is it possible also to slow down the speed of fading on mouse out?

[Richard]

Dear @spontans

Sorry its been a while since this thread,
The following CSS is what controls the transition speed of the Imagehover, Mouse-in & Mouse-out:

.lay-imagehover-region.transition {
    transition: opacity 1000ms ease;
}

I have set it to 1000ms instead of the default 200ms.

---

Hope this helps

Richard

[Remco van Dun]

This post is deleted!