CSS: jump effect on icons

To create a nice jump effect on icons with CSS, all you have to do is to change the vertical value of the background-position property when a user hovers an icon with the mouse. The important thing to bear in mind is to use links target elements with the proper background image. First, let's start with our markup:

<ul id="social">
 <li><a href="#" id="facebook">Facebook</a></li>
 <li><a href="#" id="linkedin">Linkedin</a></li>
 <li><a href="#" id="twitter">Twitter</a></li>
 <li><a href="#" id="youtube">YouTube</a></li>
</ul>

We also need to hide the text within links using a negative value for the text-indent property:

#social {
 width: 276px;
 height: 64px;
 margin: 0 auto;
 padding: 0;
 list-style: none;
}

#social li {
 width: 64px;
 height: 64px;
 float: left;
 margin-right: 5px;
}

#social a {
 display: block;
 width: 100%;
 height: 100%;
 float: left;
 text-indent: -1000em;
 background-repeat: no-repeat;
 background-position: 0 32px;
}

#social a:hover {
 background-position: 0 16px;
}

#facebook {
 background-image: url(facebook.png);
}
#linkedin {
 background-image: url(linkedin.png);
}

#twitter {
 background-image: url(twitter.png);
}

#youtube {
 background-image: url(youtube.png);
}

Our icons are 64 x 64 pixels wide, so the first rule sets the vertical offset of the background images to 32 pixels (half the height) and the rule on hover adjusts this value to 16 pixels (half the normal value). You can see the demo below.

Demo

Live demo