CSS/JS text-image masking

Question

Wow, I could really use a hand with this one. I've got some @font-face text that needs an image mask on hover.

Off state:

Hover state

You can see that there's a fire background to the hover text, but ONLY on the next and not the entire item. I'm trying to avoid individual image rollovers so that this effect can apply to any text shown in the menu, but I'll resort to fixed images if I have to.

Is there any way to achieve this without photoshopping every single link?

Answer 1

Nope! Extract images from the photoshop file for both inactive and active states, then apply on css :hover!