Question

I was just going through a website code, and I saw an image for Social Networks link

When I see the website, I only see the top row of the images. It means the darker top three images.

The issue is when my mouse hovers over the facebook image, only facebook image becomes the light facebook image, and same happens for the other two links as well.

The code they have used is given below

<ul class="social-icons"> 
<li class="facebook"> 
    <a title="Facebook" href="http://facebook.com/eclyptix">Facebook</a> 
</li> 
<li class="twitter"> 
    <a title="Twitter" href="http://twitter.com/eclyptix">Twitter</a> 
</li> 
<li class="linkedin"> 
    <a title="LinkedIn" href="http://linkedin.com/company/eclyptix">LinkedIn</a> 
</li> 

How is this done.

Your help is appreciated.

Thank you
Zeeshan

Answer 1

@ Zeeshan; it’s called sprite
check this article for more http://css-tricks.com/158-css-sprites/

check this example http://jsfiddle.net/sandeep/F4wpW/