Image navigation with rollover effect

(average: 4.50 out of 5)

 Loading ...

Making a navigation with image rollover effect is an interesting and most widely used method. This will be done by the use of simple code in CSS. This is a simple method of swapping the background image of the link element. In this example, i will show you with the use of list property as navigation.

Here is a sample html code to display the link items,

<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>

In order to make search engines to read the links, i have added text links over plain background buttons.

CSS:

.navigation li{
list-style: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
float: left;
margin-right: 15px;
}

list-style: none makes the list items not to generate bullets. float: left is to stack the list items left side of each li component. And margine-right: 15px which makes spaces between the buttons.

.navigation li a{
display: block;
width: 154px;
height: 45px;
color: #fff;
background: #666 url(button.jpg) no-repeat;
text-align: center;
line-height: 45px;
text-decoration: none;
}

Here display: block is defined to make links as a block with a height of 45px. The background property defined here is the important one which displays the background image. The color code(#666) before the image name ensures to display grey background in the absence of background image. The reason for putting line height of 45px which is the total height of the button is to make the button text to align vertical center and text-decoration: none makes the text links without underlines.

.navigation li a:hover,
.navigation li a#active{
background: #666 url(button-over.jpg) no-repeat;
}

li a:hover which make the swapping of button background when mouse over. Here a#active is used to show the active link.