ronaldroe

Recently, I posted on here asking whether CSS3 transitions supported background-image. The answer, of course, was no.

So, I devised a workaround I wanted to share here using a property it does support: opacity.

The effect works in Chrome, Safari, Opera and Firefox 4+. You can see a demo on this page I'm working on here. Mouse over the header to see it.

For this particular instance, I used a sprite and shifted the position. Essentially, what I did was create a div with the background set to the normal state image. Then, I placed a div inside that with the background set to the mouseover state image and set the height and width to 100%. Then, I set the opacity to 0, and on the hover state to 1. The rest was just CSS3 transitions.

Here's the code:

HTML
CSS
Since opacity doesn't work in IE8 and below, I used a conditional comment to create a regular old hover effect.

__________________
Ronald Roe
Small Business Web Design

bcee

Thanks for sharing. I love that web font for the nav.

__________________
Submit to my Website Gallery | NY Web Design