[Telos]

Ever since I read about this nice little CSS trick on the internet I've been using it with hover images. I haven't seen much tutorials of it so I thought to contribute and wrote this.

You can see a lot of hover effects on web nowadays. When you hover your mouse cursor over a link it usually changes to something else. Doesn't matter if the link is an image or just text. There's usually some sort of hover effect in place.

If it's a graphical link the hover effect is usually another image displaying the hover effect. This image is usually preloaded on page load so that the user sees the effect right away but there's also a another way to do it. How about using just one image and change it with CSS? Keep on reading to find out how.

Just do the graphical button the way you have always done. If you don't have your own you can use the one I used in this tutorial (Adobe Photoshop .PSD file). You can also skip the image creation process and use my tutorial button instead.

My button is pretty simple one and it has one layer for the basic button graphics and another for the hover effect. Now it's time to do some photoshop magic. You have to create another image which has these both states in it. Copy the button with the basic state on to another image

* Ctrl + A
* Edit | Copy Merged
* File | New | OK
* Ctrl + V

Now you have the basic image in place. Next step is to make enough room in the image to fit the hover state

* Image | Canvas size ...
* Double the image width. In my case 200 * 2 = 400. Make sure the anchor is on the middle left and relative is unchecked
* Now repeat the first part and copy the button in it's hover state to the image
* Place the hover state layer to the right side of the image so that in the end you have one image with two images side by side
* Save it as .jpg

Now it's time to create the HTML and CSS. You don't use the IMG tag at all on this one. Just the A tag.
HTML

<a id="my_button" href="#">my tutorial button</a>

CSS

<style type="text/css" media="all">
	a#my_button:link, a#my_button:active, a#my_button:visited {
		display: block;
		width: 200px;
		height: 50px;
		background-image: url('csshover_buttons.jpg');
		background-repeat: no-repeat;
		text-indent: -9999px;
	}	
	a#my_button:hover {
		background-position: -200px;
	}
</style>

That's it. So basicly what you are doing is that you create an A tag and you set it to be as wide and high as the button. Use background-image to set the graphics to it. Then you make a hover css and you move the background image with background-position to reveal the other image on the right side of your hover image. In this case move the background image 200px to the left (-200px).

Wanna see it in action?