Solution for changing image on hover

Question

I have a block of gray-scale social icons. They are being changed to a colored version, once hovered.

I decided to make it via pure CSS using :hover pseudo-class. But the problem is that they only start loading when hovered, thus causing the image disappear for some seconds.

Is it possible to find the solution, for example, by loading them when the user is on the bottom of the page?

With best regards, Artem Ushakov

score 3 · Accepted Answer · answered Dec 04 '13 at 21:59

3

I will suggest you to go for a sprite image. You will not have the image disappear.

You can find a nice explanation here:

http://css-tricks.com/css-sprites/

answered Dec 04 '13 at 21:59

pm.calabrese

386
6
10

score 1 · Answer 2 · edited May 23 '17 at 12:13

You can avoid loading the image all together by using CSS filters.

img {
  filter: gray; /* IE6+ */
  filter: grayscale(100%); /* Current draft standard */
  -webkit-filter: grayscale(100%); /* New WebKit */
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%); 
  -o-filter: grayscale(100%);
}

Here's a quick demo.

Totally stole this answer from: https://stackoverflow.com/a/13640428/191226

Solution for changing image on hover

2 Answers2