What is the best way to change an image background on hover in CSS?

[drewwyatt]

I have used a handful of methods to accomplish this in the past. Basically – I am looking for the “accepted” way of creating an image hover effect (in this specific scenario, I want to change the color of some social icons).

The 2 best methods I have used so far was preloading the second (hover) image and then replacing the first image.

**OR**

Stacking the images into one single image. and using background-position to move the second image into the visible area.

Is one of these better than the other? Or is there something I haven’t named that is better than these?

[chrisburton]

Icon fonts.

[Alen]

http://fortawesome.github.io/Font-Awesome/

[chrisburton]

Just to add: I prefer icons from http://thenounproject.com and then import them into http://icomoon.io.

However, I like to design my own.

[Author]

Posts