The New York Post uses this method for its top-of-the-page navigation. Go to their page and hover over their navigation tabs. The background changes…sort of. Actually, it’s the same image. Using CSS what they are doing is they are switching which part of the image is displayed. When it’s just sitting there, you see the top part of an image. When you hover over the image, using CSS the image suddenly jumps up and you see it displayed from the bottom. What they end up with is a beautiful hover effect with a seamless torn-paper image.
I used the same effect on the Spectator. If you hover over the image, you’ll see the image switch. The actual image is something like the following.
Here’s the CSS I used for this image:
issue_image #september_2007 a{
background: url('/wp-content/uploads/september-2007.png') no-repeat center top;
}
.issue_image #september_2007 a:hover, .issue_image #september_2007 a:active{
background-position: center bottom;
}
And the following is the HTML I used:
<!–Beginning September 2008–>
<div class="issue_image">
<div id="september_2008">
<a href="http://thebrownspectator.com/volume-vii-number-i"><span style="display:none;">Volume 7 Issue 1</span></a>
</div>
</div>
<!–End September 2008–>
That’ll do it. You make the appropriate changes to the CSS and the HTML, you can do the same thing.
