CSS: Navigation Image Link Hover
Ok, we’re gonna make a simple image hovering effect… 
Something like this! I’m not good at explaining stuffs and I’m bad at making tutorials and actually this is my first, but it’s easy anyways… XD 
First, lets get your html ready!
<html>
<head><title>Title Here</title>
<body>
<div id=”wrapper”>
<!– Here’s the navigation part where the image hovering will take place! –>
<div id=”nav”>
<ul id=”navhover”>
<li class=”menu_home”><a href=”http://kawaii-hell.net”><span>Home</span></a></li>
<li class=”menu_about”><a href=”#”><span>About</span></a></li>
<li class=”menu_links”><a href=”#”><span>Links</span></a></li>
</ul>
</div>
<!– Just added this part for the little layout I made–>
<div id=”main”>
<h1>Title</h1>
Blah blah
</div>
</div>
</body>
</html>
Second, we’ll take a good look at the stylesheet… It’s pretty much self-explanatory… If you know CSS 
/* GENERAL STYLE - You don’t have to pay attention to it, unless you want to copy it XD */
body {
background: #797777;
color: #FFF;
font: 12px Geneva, Arial, Helvetica, sans-serif; }#wrapper {
width: 430px;
padding: 0px;
margin: 0px auto 0px auto;}#main {
background: url(bg.png) no-repeat;
width: 430px;
height: 322px;
clear:both;
text-align: center;
padding: 10px 0px 20px 0px;
margin-top: -10px;}/*IGNORE EVERYTHING ELSE EXCEPT FOR THE NAVIGATION PART*/
/*NAVIGATION*/
#nav {
background: transparent;
width: 430px;
height: 43px;
padding: 0px;
margin: 0px;}
#nav span {display: none;}
#navhover { list-style-type: none;}
#navhover li { float: left;}/*HOME BUTTON*/
.menu_home a:link, .menu_home a:active, .menu_home a:visited {
background: url(home_but.png);
width: 93px;
height: 43px;
display: block;
border: 0px;}
.menu_home a:hover {
background:url(home_hover.png);
width: 93px;
height: 43px;}/*ABOUT BUTTON*/
.menu_about a:link, .menu_about a:active, .menu_about a:visited {
background: url(about_but.png);
width: 93px;
height: 43px;
display: block;
border: 0px;}
.menu_about a:hover {
background:url(about_hover.png);
width: 93px;
height: 43px;}
/*LINKS BUTTON*/
.menu_links a:link, .menu_links a:active, .menu_links a:visited {
background: url(links_but.png);
width: 93px;
height: 43px;
display: block;
border: 0px;}
.menu_links a:hover {
background:url(links_hover.png);
width: 93px;
height: 43px;}
BREAKING DOWN THE CODING…
Now, let me explain what the code does…
First… The HTML code… Ignore the rest of the tags on the CSS & HTML… Those are just extras… Heheh…
<div id=”nav”>
<ul id=”navhover”>
<li class=”menu_home”><a href=”http://kawaii-hell.net”><span>Home</span></a></li>
<li class=”menu_about”><a href=”#”><span>About</span></a></li>
<li class=”menu_links”><a href=”#”><span>Links</span></a></li>
</ul>
</div>Now let see… id=”nav” refers to the #nav on the css… It’s going to be the div container for the navigation…
<ul id=”navhover”> </ul> —> Basically we will put it here… a container… with style! XD
<li class=”your_image_id></li> —> If you’re going to make a navigation like the one on the sample, you might want to list them horizontally, so we’re going to put in these code…
#navhover { list-style-type: none;} –> of course it’s to not show any bullets like “square/circle/disk” on your <ul>
#navhover li { float: left;} —> We’re going to use floating! This will make it list horizontally…
<a href=”link_here”><span>Home</span></a> —> Well, I doubt you would want the text “Home” on your image, right?… So, we would remove the text by using this code sniplet!
#nav span {display: none;}
CSS CODE
#nav {
background: transparent; —> The background could be anything, if you want colors, background images and such, it all depends on you…
width: 430px; & height: 43px; —> Well, enough said… it will be the size of your div container…
padding: 0px; margin: 0px; —> if you want to space out your images… Make sure it match the hovers…
}
/* Refer to the explanation above */
#nav span {display: none;}
#navhover { list-style-type: none;}
#navhover li { float: left;}
IMAGE HOVERING CSS
Now, for the main part, the image hovering effect! We’ll use the home button as a sample….
.menu_home a:link, .menu_home a:active, .menu_home a:visited {
background: url(home_but.png); —> The image you want to use as a base…
width: 93px; & height: 43px; —> Self explanatory… XD The width & height of the image
display: block; —> Well, if you want to display it as a block, do so, but not needed
border: 0px; —> Well, if you don’t want to put any borders on your image… XD
}
FOR THE HOVERING EFFECT…
.menu_home a:hover {
background:url(home_hover.png); —> The image you want to use to overlap the base image…
width: 93px; & height: 43px;} —> Well, enough said XD lol…
If you need sample images, you can just go here…. and grab the images used there… please don’t direct-link~ Anyways, if that doesn’t work… just go try it with some images you have in hand… Anything will do..
Woot! It’s over! Try it and see if you can work your way around it and make it more better… Good luck!
WANT TO SUBMIT A TUTORIAL? Send me an e-mail using the contact form here or directly send me an e-mail —> katziex (at) gmail (dot) com! You can also register here to write an article about your tutorial…
