Is it possible to set a transition for a solid color?

Design help General
1

I’ve got a link block with a background image set. Then on hover, I add in a transparent “solid color” overlay over the entire link block and over the background image.

My question is, is it possible to transition into that transparent “solid color” overlay over the image on hover?

I’ve tried to use the transition “all properties” but it does mighty strange stuff to the overall link block, and doesn’t actually slowly transition into that color as I’m hoping to do.

So right now it just jumps to that color with a super abrupt change - hoping to smooth that out.

Thanks!

Here is my site Read-Only: LINK

2

I see what you mean… No, you can’t transition smoothly when there’s multiple solid color backgrounds, unfortunately. You must rely on an overlaying colored DIV and play with its opacity.

1 Like
4

@vincent Ah, good to know. I actually tried doing the overlaid color DIV initially, but couldn’t for the life of me get it to overlay properly over the image. Will have to try again and see if I can get that to function correctly this time! :slight_smile: Thank you!

5

I wrote a guide for people in your situation :smiley:

Come back if you still have trouble to get where you want

1 Like
6

@vincent - thank you kindly!

I think I did this right? Some of the overlaid divs don’t appear to align perfectly. (I think some are maybe a touch too wide??) Which makes me wonder if I did a bit of a hack job with it. haha.

Anyway, I’d love to know your thoughts if you’ve got a second to take a peek at what I ended up doing.

Thank you again! :slight_smile: