Image overlay transition

How To
1

Hi,

I’m trying to do a basic colour overlay on an image on hover. How do I apply a transition to this, so it doesn’t just jump between the image and colour?

In my image :hover class I have added the colour as an Overlay, and added a Transiiton of all 2.5s ease, but this doesn’t work.

Thanks.

1 Like
2

Hi,

you should add a transition to the default state, not :hover, then it will work :wink:

Matej

3

Thanks, that’s what I thought. I think I may have problem elsewhere in my process.

This is what I have:
Container with a Block and Image.

In the image :hover state –
Gradient / Overlay : Apply to Overlay
Color: Set an overlay colour and opacity.

Back to default state –
Filter / Transitions
Transition : all 2s ease-in-out;

Still don’t get the transition. Alopogies if I’m making an obvious mess of things!

4

Aha, I see which overlay you mean now. Sorry, previously I thought you meant “overlay” as a general color change, over the div element, that includes “image” element.

Ah, yeah, with overlay, it will not work like this because we use “linear gradient,” which does not support transitions.

It could/should be possible with @property (css - Use CSS3 transitions with gradient backgrounds - Stack Overflow), but that’s already a custom CSS territory.

1 Like
5

OK, thanks. I think I have been approaching this the wrong way. I have now added the transition to the Div element and applied a CSS Filter on hover, which gives me the effect I was trying to achieve.

Thanks.

1 Like