Reputation: 19875

How to make a single image, treated as three different images?

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

enter image description here

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

Upvotes: 1

Answers (3)

kaya

Reputation: 41

You can set the background image position and crop it by setting width/height in the css file.

//HTML

<ul class="social-icons">
    <li class="facebook">
        <a title="Facebook" href="http://facebook.com/eclyptix"><img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" width="30px"></a>
    </li>
    <li class="twitter">
        <a title="Twitter" href="http://twitter.com/eclyptix"><img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" width="30px"></a>
    </li>
    <li class="linkedin">
        <a title="LinkedIn" href="http://linkedin.com/company/eclyptix"><img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" width="30px"></a>
    </li> </ul>

//CSS

.facebook{
    background:url(https://i.sstatic.net/LNPd7.png) 0px 0px no-repeat;
    width:30px;
    height:30px;
}
.facebook:hover{
    background:url(https://i.sstatic.net/LNPd7.png) 0px -30px no-repeat;
}

.twitter{
    background:url(https://i.sstatic.net/LNPd7.png) -30px 0px no-repeat;
    width:30px;
    height:30px;
}
.twitter:hover{
    background:url(https://i.sstatic.net/LNPd7.png) -30px -30px no-repeat;
}

.linkedin{
    background:url(https://i.sstatic.net/LNPd7.png) -60px 0px no-repeat;
    width:30px;
    height:30px;
}
.linkedin:hover{
    background:url(https://i.sstatic.net/LNPd7.png) -60px -30px no-repeat;
}

Here is the working example http://jsfiddle.net/kayadiker/uuKzQ/

Upvotes: 1