Best Method For Using CSS Transitions To Fade A Background Image?

[Tom Houy]

What would you currently suggest as the best method for fading background images via CSS transitions? In other words, if I was styling a menu and wanted the button background images to fade in/out?

From what I’ve read so far, CSS transition fades don’t work on background images because they are a path rather than a numerical value.

Some of the methods I’ve seen suggested so far only work in situations where you are using images with text in them, not actual text.

I can accomplish this by using an empty set of SPAN tags that contain the background images in a regular and hover state before each anchor link and styling the SPANs to transition from one to another via their opacity. However I’m wondering if there are any methods that don’t need to rely on the extra HTML markup or using image text.

[Paulie_D]

This sounds like a job for a pseudo element. That avoids the need for extra mark-up like a span.

Transitions on those are, I think, now pretty well supported in most modern browsers and you could transition the opacity values of just the pseudo element.

What kind of fade did you have in mind?

[Paulie_D]

Seems to work.

http://codepen.io/Paulie-D/pen/KfIqJ

[Tom Houy]

Thanks!, it’s working for me as well.

[Author]

Posts