Simple Sprite Tutorial

Creating simple hover over sprites is a must to save on website load time. Every time you website has to make an html request eg. load two separate images (one for the natural state and the other for the hover state) it slows down your page load time, plus you don’t get such a smooth transition when hovering over you image.

Sprites are a great solution for this, seeing as your browser only has to load one image and its ready for action. Sprites are also fairly simple as you will see.

First lets get our sprite graphic ready in PhotoShop. We will be creating two social icon sprites that change color and slightly rotate when hovered over.

Begin by opening up you image, I’m using a twitter icon I found on iconfinder.com, note the dimensions of your image, this one is 94px x 94px (we will be using these values in our CSS).

Next we need to add the hover over state to this image. I first double the canvas hight (188px). Then I duplicate the original image and position it directly bellow it. Now I make the desired changes to the lower image, I changed the color and lightly rotated mine to make it look like its turning when you hover over it. Save your image and lets go get coding!

<div class="social twitter">
<a href="http://twitter.com/patskot" taget="_blank" alt="Twitter" />
</div>

<div class="social facebook">
<a href="http://facebook.com/skotniczny" taget="_blank" alt="Facebook" />
</div>

Lets start with the HTML mark up. We are going to be using our image as a background for a div using CSS. For now we have created two DIVs one for twitter and one for FaceBook. both DIVs have a class of .social. I like to ad a text link into my DIV (even though you wont see any text) having some extra text cant hurt when it comes to SEO.

.social{
width: 94px;
height: 94px;
float: left;
}
.social a{
display: block;
width: 94px;
height: 94px;
text-indent: 9999px;
}

Now lets work on the CSS. I’ll start off by setting the dimensions for the social class. Seeing that both icons have the same dimensions this will get applied to both icons. I set my width and height to what the icon was before we modified it to be a sprite (94px x 94px) this will insure that only one part of the sprite image will be shown. I also set the width and height for the link making sure I set the display to block so that the entire icon area is clickable. You’ll notice that I indent the text with a value of 9999px, this gets the text out of the way and off the screen.

.facebook{
background: url(http://patskot.com/wp-content/uploads/2012/11/facebook-sprite.png) top center no-repeat;
}

.twitter{
background: url(http://patskot.com/wp-content/uploads/2012/11/twitter-sprite.png) top center no-repeat;
}

Now lets add the images. Each div has its own separate class “facebook and twitter”. all we are going to do is specify a background for each. I also set the background positioning to top and center to make sure that the top image is shown first. At this point you should be able to see your image.

.social:hover{
background-position-y: -94px;
}

Lastly we add a hover value to the .social class (this way it effects both our divs) We simply tell it to to shift the y-position of the background by half the full sprite image -94px (its a negative value because we want the image to move up rather then down).

and there it is. Hope this tutorial was easy to follow, please let me know if you have any suggestions or requests. I’ve also added a CodePen of this project so you can get in there and see how it works.

Check out this Pen!

The post Simple Sprite Tutorial appeared first on Patrick Skotniczny.