Follow me on Twitter

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 :-)

css_feature_box.zip (492k)

Comments

Replying to comment article

FYI: You are currently not logged in. It's cool though - you can still comment. But only members get a profile page, access to the download section and they can pimp their own web sites. Feel free to register or Login now!

Your name:

Your comments:

Note: HTML tags are automatically stripped from comments.

Are you human?

Sorry, I have to ask. So what sort of animal is this? (Hint: you don't have to be perfectly specific)

Back to top