The HTML and CSS

The HTML is very straight forward. We have a h1 element with a link inside of it. We’re going to hook our Javascript onto our header (or whichever element we want to add this effect to) and add some custom markup.

<h1 id="header"><a href="#">Awesome header</a></h1>

Now we’ll add some CSS to style our header and give it some imagery

#header {
margin: 0;
padding: 0;
text-indent: -9999px;
width: 400px;
height: 225px;
position: relative;
margin-left: -1em;
background: url(header.jpg) no-repeat;
}
#header a {
position: absolute; // This allows us to have
top: 0; // the anchor on top of the header
left: 0;
width: 400px;
height: 225px;
display: block;
border: 0;
background: transparent;
overflow: hidden;
}

The reason to why we’re setting the h1 to position: relative; is to make it easier to position the imagery for the hover when we add it.

When we load the page we’re going to add some custom markup, so this is what we’ll have to work with in our DOM. The reason we’re adding the span before the anchor is to avoid some issues with Internet Explorer 6 and the z-index property.

<h1 id="header">
<span class="fake-hover"></span>
<a href="#">Awesome header</a>
</h1>

So, let’s start out by adding this markup manually into our document so we can see what it will look like when we apply the effect. Then we’ll adding the following CSS:

#header .fake-hover {
margin: 0;
padding: 0;
width: 400px;
height: 225px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(header.jpg) no-repeat 0 -240px;
}

It’s important to make sure that the text doesn’t shift a pixel or two since it will be very obvious when the effect kicks in. You may want to try this a couple of times by removing and adding the span to make sure it’s properly aligned.

The Javascript

Now that we’re all set markup and CSS-wise it’s time to start adding some Javascript goodness! First of all, remove the fake span from your document.

As I wrote earlier, I’ll be using jQuery, but feel free to follow along no matter what library you may or may not be using. I’m going to write this using JSON to make the script more modular. I’ll also write it as a more general function so it’s easier to add the effect to any element you want to on your site.

First load the jQuery library

<script type="text/javascript" src="jquery-1.2.3.min.js">
</script>

Now let’s add some code. I’ll be adding it directly into the document but you may want to use an external file for a live site.

var Header = {
addFade : function(selector){
$("<span class=\"fake-hover\"></span>").css("display",
"none").prependTo($(selector));
// Safari dislikes hide() for some reason
}
};

Okay. This function takes a CSS-selector as argument, adds our fake hover and hides it. Simple stuff. Now let’s expand our Header object adding some Javascript events for hovering and removing the mouse, and finally making it load when the page loads. When the mouse is hovered over the header, we fade in the other header graphics, and when the mouse is moved off we fade it out, using jQuery’s built in effects.

var Header = {
// Let's write in JSON to make it more modular
addFade : function(selector){
$("<span class=\"fake-hover\"></span>").css("display",
"none").prependTo($(selector));
// Safari dislikes hide() for some reason
$(selector+" a").bind("mouseenter",function(){
$(selector+" .fake-hover").fadeIn("slow");
});
$(selector+" a").bind("mouseleave",function(){
$(selector+" .fake-hover").fadeOut("slow");
});
}
};
$(function(){
Header.addFade("#header");