CSS hover tutorial

[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?

[Man1c M0g]

Nice, cute, and effective! Mind if I pop it onto the Biorust main pages?

[bedlam123]

Thank you Telos, this works great and is not complicated!

[Telos]

Yeah Man1c M0g, go ahead. Just use it the way you see best.

You can also see an effective css replacement effect on this tutorial. It's always nicer to have all website images as background images and not use the IMG tag so using background-image, width, height and text-indent (-9999px) you can show all your images as background images. I usually do the basic layout images like that and use IMG tag only in dynamic content since the image replacement tags usually need an unique ID to work and it would be pointless to create css and id's on the fly. So image replacement goes like this:

<style type="text/css">
    h1#replacement {
        width: 100px;
        height: 100px;
        background-image: url('myimage.jpg');
        background-repeat: no-repeat;
        text-indent: -9999px;
    }
</style>

<h1 id="replacement">My replaced image</h1>

[misswynne]

Wow, that is pretty sweet! You're right about most links having hover effects - I use them almost every day....

[Man1c M0g]

Many thanks Telos! I'll add your tutorial onto my list of tutorials to add!

[Man1c M0g]

And the tutorial is now online over at http://www.biorust.com/tutorials/detail/227/en/ . I made a few changes, but nothing too drastic. Many thanks for your tutorial m8!

[Telos]

Thanks for putting it there. Changes were good ones so thanks for them too. I was about to write another tutorial yesterday but didn't find the time. Going to do it this weekend if my schedule is mercyful enough and yes, it's going to be a PHP tut.