Create a CSS image sprite based feature box
Written December 29, 2009. 12 comments.
Inspired by some of the excellent feature boxes I’ve seen on countless sites, I thought it about time I made my own but only using CSS and the excellent image sprite technique. Not familiar with image sprites? Here’s a quick primer.
Note that this feature box would still work perfectly fine if you were to have each image separate, but less images means less HTTP requests and a less ‘laggy’ responsiveness for the user. Here’s what it looks like:
So can see a working demo here.
It’s comprised entirely of only 2 images and is pretty simple. Your semantic HTML looks like this…
<ul id="features">
<li class="design"><a href="">Design</a></li>
<li class="programming"><a href="">Programming</a></li>
<li class="cms"><a href="">Content Management Systems</a></li>
</ul>…and the CSS:
/*** Feature Box *****************************/
#features {
width:740px;
height:300px;
margin: 0 auto; /* Center the box in the page - can be safely removed if desired */
background:url(images/images.jpg) no-repeat 300px 0; border:solid 1px #e6e6e6;
}
#features:hover {
background:url(images/images.jpg) no-repeat 300px -600px;
}
#features li {
height:100px;
width:350px;
list-style:none;
text-indent:-9999em;
}
#features li a {
height:100px;
width:350px;
display:block;
}
/*** Design *****************************/
#features .design {
background:url(images/feature_sprite.png) no-repeat 0 0;
}
#features .design a:hover {
background:url(images/feature_sprite.png) no-repeat 0 -300px; width:740px;
}
#features .design:hover {
background:url(images/images.jpg) no-repeat 300px -300px; width:740px;
}
/*** Programming *****************************/
#features .programming {
background:url(images/feature_sprite.png) no-repeat 0 -100px;
}
#features .programming a:hover {
background:url(images/feature_sprite.png) no-repeat 0 -400px;
width:740px;
}
#features .programming:hover {
background:url(images/images.jpg) no-repeat 300px -400px; width:740px;
}
/*** Content Management Systems *****************************/
#features .cms {
background:url(images/feature_sprite.png) no-repeat 0 -200px;
}
#features .cms a:hover {
background:url(images/feature_sprite.png) no-repeat 0 -500px;
width:740px;
}
#features .cms:hover {
background:url(images/images.jpg) no-repeat 300px -500px;
width:740px;
} So what’s going on here?
Each list item requires a class in order to position the background image. I’ve used .design, .programming and .cms for this demo.
Starting with .design the background image position is simply 0 and 0 (0 pixels left and 0 pixels top). On design a:hover the background image is moved -300px to show a different part of the image giving the illusion that a different image has been loaded. This same method is applied for the other 2 classes while moving the background image even further upwards to reveal the appropriate part.
For a little more bling I decided to add a small enhancement. A second background image is in the right of the feature box which also changes position when the mouse passes over one of the 3 list items. There is a slight complication with this though. Because we can’t move 2 different background images with a single a:hover, we have to change the right image position with design:hover, programming:hover and cms:hover respectively.
Sounds confusing? It will make more sense when you look at the full CSS.
Yours to modify, use or improve as you see fit. Tested and works fine in all the browsers that matter, and Internet Explorer 7 & 8 :-)
Start of pageWho is That Web Guy?
Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, and currently head of the web dev unit at Stormbox, a branding and creative communications agency located in Perth, Western Australia.
Thanks for sharing.
Thanks Web Guy.
Two thumbs up Mike!