Best way to toggle image's background on hover?

Question

I'm wondering which way would be the best.

I have some semi-transparent anchor images which change fully transparent background to half-transparent red background on hover:
->

The employer provided me with red-background versions for each image, but of course I don't want to use them because it would be a total bandwidth waste. Instead I want to

option 1 : toggle background image on hover with 1 universal image:


option 2: use CSS3, but I'm not sure if it's possible

btw. I've read many good opinions about CSS sprites, is it a good idea to convert whole image positioning on website to that in sprite fashion? or is it only recommended for certain image type, like anchors?

Answer 1

Sprites is a good way to go when you have fragmented images all over your website, like say for example icons like email, phone, services etc, the more images you have, the more http request it creates, thus making your website ineffecient. Also, using CSS Sprites, the buttons won't create a glitch when you hover them, yea, obviously only the first time user may experience a glitch but it will create a bad impression in general which you can come over by using CSS Sprites as you will have to just change the background-position of the image.

Coming to the buttons, if you want you can simply use CSS sprites, place both the button state over a single canvas, and use them using background-image property and later switch them using background-position property on hover.

On the other hand, you can also use CSS3 if the effect you want is possible. By looking at the images, I don't think even CSS3 is required. If these are not the real buttons, and the real buttons are extra fancy, CSS Sprites would be a good way to go for as IE will spoil your CSS3 buttons.

As far as the transparency goes, you can use rgba() where a stands for opacity. You can also beautify them using CSS Transitions for a smoother hover effects.

You can read my answer here if you want a quick overview of what CSS Sprite is and how to use them.