How to create a hover interaction with 2 background images

[LeoniSelby]

Hi guys,

Here’s a question for you about hover states. The way I see it, there are 3 possible hover states on a btn or item. I’ve figured out 2 of them.

So far I’ve managed to create a hover state using 2 images that toggle each other.

And I’ve created a hover state on a btn for example by changing the color of the background.

So far so good…

Only now, I want to create a button with a tiled background pattern on ‘up’ then exchange it for a different tiled background pattern on ‘over’… including button text which doesn’t change color. Simple right?

I can’t for the life of me figure out how to do that… it’s not the same as switching images using the opacity effect… and it’s not the same as simply changing the color style… it seems to be something different…

Any ideas??

Looking forward to your replies.

Kind regards,

Leoni

[vincent (Vincent Bidaux)]

Add two backgrounds and swap their visibility upon :hover.

Here in video Google Chrome – Tapes (with a bonus lava!)

Normal state:

http://vincent.polenordstudio.fr/snap/rqjnz.jpg

Hover state:

http://vincent.polenordstudio.fr/snap/h52oo.jpg

[LeoniSelby]

Hi Vincent,

OMG, I’m so sorry, I never replied a thankyou to this post. You must think I’m a real douche…
I’ve been out of the running all summer doing festival season… that’s why.

Anyway so now I’m back in business. I’ve just tried it and it works really well. Thanks!!

Grtz from Amsterdam,

Leoni