I always forget this basic image hover. Im posting it here in my blog for future referrence and for you my readers as well. Making hover images is fairly simple and very straight forward. It only needs a couple of css lines using the anchor element and its hover by manipulating the background image. Hover your mouse pointer to the image below and see a working sample of the image hover using CSS.
Download image hover resources if you want to try it on your own.
Below is a simple HTML code used to display the image hover.
<a id="nav-home" href="#"><span class="nav-hide">Home</span></a>
The span tag allows us to hide its content using the display:hide; command in CSS. The nav-home value will define how our image will then be displayed. See below for the CSS code.
a#nav-home {
display: block;
text-decoration: none;
width: 120px;
height: 20px;
margin: 0 auto;
background-image:url(images/hover1.gif);
}
a#nav-home:hover {
background-image:url(images/hover2.gif);
}
.nav-hide {
display: none;
}
#nav-home img {
border: 0;
}
