Interaction effects - hover on vs hover off

[adaptifyDesigns]

hello, is there a way to control the hover on vs hover off transition duration for the interaction effects of an element?

I have an effect on an image which scales the image while hovering on it. I’ve set the transition duration to 8000ms so that the scale effect is very slow and subtle. The problem is that when the cursor moves off of the image it takes just as long for the image to scale back to its normal size. I want the scale effect only to happen when hovering. And then I want it to snap back to its original size when hovered off. Does that make sense?

This is normally very easy to do with CSS because you can apply the transition only to the hover state, or vice versa. But in the Cornerstone effects panel, I don’t see any options for this.

I tried applying custom CSS to the element, like this:

$el:hover {
  transition-duration: 0s !important;
}

But this does nothing.
Strangely, if I do this:

$el {
  transition-duration: 0s !important;
}

it successfully disables the transition duration, but it disables it for both the hover-on and hover-off states. So I don’t know how to only get the transition duration to apply to the hover state.

Please advise. Thank you.

[ruenel]

Hello @adaptifyDesigns,

Thanks for writing in!

The hover should comes after the 0 duration transition.

Be advised that custom coding is beyond the scope of our support. You may need to contact a 3rd party developer and that you will have to maintain the code to make sure that it will not create issues with other elements.

Best Regards.

[adaptifyDesigns]

Thanks, this helped. The reason the custom CSS wasn’t working for me is because the image is a child element of a div which is set to “link child interactions.” So instead of applying the custom CSS to the image element itself, I had to apply it to the parent element, like this:

$el .gallery-image {
  transition-duration: 0s !important;
}
$el:hover .gallery-image {
  transition-duration: 8s !important;
}

And now it’s working as desired.

Much appreciated.

[tristup]

Hi @adaptifyDesigns,

Glad that you are able to fix it.

Thanks