JUN
2008
02
Here is what we will be creating. Rollover the image to see the effect.
How
This effect is perfect for image links due to only needing to load one image and requiring only two CSS calls. The entire image we are using can be seen on the right. The way to pull off this technique is all in the CSS, so let's start there.
Below you will see the CSS styles that control this image. The trick is the way we define the positioning of the background image. In the link state we use 'left top' and in the hover state we use 'left bottom', this way either the top half of the image is showing or the bottom half. You then of course follow up with the display, height, and width styles. (the height should be set to half what the full height of the image is, so only half the image shows).
Let me explain the need for text-indent and outline-style. The text-indent is used to hide any text you may type inside the <a href="link.html">Hidden Text Goes Here</a>. We also need outline-style to remove the dotted border that appears once the link is clicked.
CSS Styles
#cssImageRollover a{
background: url(cssImageRollover.png) left top no-repeat;
display: block;
height: 184px;
width: 200px;
text-indent: -9000px;
outline-style: none;
}
#cssImageRollover a:hover{
background: url(cssImageRollover.png) left bottom no-repeat;
display: block;
height: 184px;
width: 200px;
}
The HTML is as simple as it gets. All you need to do is reference the div id or class name you chose and then insert basic <a href=""> notation as you can see below.
HTML
<div id="cssImageRollover">
<a href="link.html">Hidden Text Goes Here</a>
</div>
