How to transition an image from black-and-white to color using Cornerstone Effects

[Hudsonpilot]

Hi, I’m trying to transition an image from black-and-white to color using the Effects feature.

I’ve set the base to grayscale (100%) and the interaction to brightness (120%). When I hover over the image, it has the intended effect of going from b&w to color, but the transition speed and easing do not have any effect. I’d like to slow down the transition. Perhaps I’m going about this the wrong way. Can you help?

website page: https://www.upstatefilms.org/

The images are above the Starr and Orpheum logos (which I have been able to ease in to the colored background).

Thanks for any advice you can provide.

[ruenel]

Hey @Hudsonpilot,

Thanks for writing in! your image filter should be set up like this:

Change the transition to 1000ms.

If this is not helping, kindly provide us access to your site so we can check your element settings. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[Hudsonpilot]

Those settings transform the image from the original color to grayscale. I’m trying to transition from grayscale to color on hover. The current settings accomplish this, but the transition is immediate; the settings for the easing and speed are not having any effect. I’ll send the login info separately. Thanks for your help!

[prakash_s]

Hello @Hudsonpilot,

I checked your site it seems that you have already set the image color from grayscale to color on hover. In case if it not rendering on your end it might be the issue of browser cache at your end. I would suggest you please clear your browser cache and then check it again.

Thanks

[Hudsonpilot]

Yes, it’s rendering properly. The problem is that it’s not responding to the setting for the transition, like the speed. I would like the transition to ease in at 1000 ms.

[Hudsonpilot]

The transition speed is working properly for the logos below the images, but I can’t get the image transitions to slow down in the same way.

[prakash_s]

Hello @Hudsonpilot,

I checked your settings, it seems that you have set the transition as 2000ms. I would suggest you set it as 1000ms. Please have a look at the given screenshot below.

Hope it helps
Thanks

[Hudsonpilot]

Yes, the transition is set at 2000ms, but the transition is not going at that speed. It is almost instantaneous, as if there is no easing at all. The logos below the image are set at 300ms, and they ease in gradually. The transition for the image is much higher, but it does not ease in at all.

[ruenel]

Hello @Hudsonpilot,

Your filter should be the same so that the transition delay will work. If you have another filter on hover, it will not work as expected. I edited your image effects having to have a Grayscale(0%) and Grayscale(100%) on hover.

You can clearly see that the delay is working.

Please compare the two effects now.

[Hudsonpilot]

Ah, the key was to make the filters the same. Now I’ve set it so the base is 100% grayscale and the interaction is 0% grayscale, and the transition works perfectly. That was too easy!
Thank you so much.

[marc_a]

Hi @Hudsonpilot,

You’re welcome! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.