• Development
  • Programming
  • Security / Hacking
  • Web Design/Scripting
• Japanese
  • Tips & Tricks
  • Reviews
• Martial Arts
  • Tips & Tricks
  • Reflections
  • Random Thoughts
• Miscellaneous
  • News
  • Technology
  • Video Games

Tutorial: Minimal CSS Image Hover

Posted on | November 18, 2009 | No Comments

Text link hover are quite common, but becoming even more common is image link hovers. Why is this? Well, because you can make things look much nicer(cooler, cleaner, sharper, etc) using an image. Problem is that it can get messy with all the CSS that is involved if you don’t do it properly. I’m here to show you an easy way. Check out the demo if you’re not sure what I mean by Pure CSS Image Hover.

Source Code

#pure_hover {
	display: block;
	height: 40px;
	width: 40px;
	background: url(images/ab.png);
}

#pure_hover:hover {
	background-position: -40px 0;
}

Reviewing Code Line by Line

The code for this image hover effect is quite simple once you’ve actually gone over it. First, we need to create a CSS ID for our hover item and set some things. The first thing we need to set is display to block, which allows our link to show up even though it has no image or text inside of it. The other settings are simply choosing an image and setting its width and height.

#pure_hover {
	display: block;
	height: 40px;
	width: 40px;
	background: url(images/ab.png);
}

However, the key to this whole concept lies in the way you set up your image. Instead of having two separate images where you hover over one and the other shows up, you simply use a single image. If you take a look at our “A B” image, you’ll notice that it is one image but contains both images that we want to display. All we’re going to do is simply shift “A” out of the way(and out of sight) when we want “B” to be visible. Pretty simple, eh?

The only thing left that you need to do in your CSS is define the hover effect. I know, that the “A” I used is only 40px in width and so is the “B”. Therefore, I know I want to move “A” 40px out of the way to the left, which will put “B” right where it needs to be.

#pure_hover:hover {
	background-position: -40px 0;
}

Implementation

All we need to do now, is simply set our link to the ID we chose and we’re ready to rock and roll! If my tutorial didn’t explain anything well enough, feel free to ask questions, but the best way to learn is to learn by example so take a look at the source code and demo provided!

Author: Zyaga

I'm a Computer Programmer / Web Developer, though I have quite a lot of other hobbies and interests. You can usually find me studying Japanese, Blogging, watching Anime(for hours at a time), or possibly even practicing some Martial Arts. My brain runs rampant so I have to fuel it's fire by having many hobbies to switch back and forth from.

Comments