Laying the HTML Groundwork
The beauty of CSS is that there are several ways to do this, all effective. The simplest and most direct method for laying your groundwork is to create a A link box, however, you can also create a box area using an DIV tag, SPAN tag, LI tag, etc. the code will just be slightly different. Also, there are still several browser versions that only support the CSS :hover command on a link, and not on block elements of the page. So, if possible, just use the A tag.
I am going to make a few assumptions, one being that the image you are working with is 200px wide and 300px high (the displayable area). This means, you need to create an image that is actually 200px wide by 600px high because you will put the inactive state image on top, and active state image on bottom. Only the top half of the image is displayed, and then on mouse over or ‘hover’ the image shifts to display the bottom part of the image only.
Here is the HTML code to start with:
<a href="/yourlinkhere" class="cssmouseover"></a>
That’s it! If you want to use several mouseovers in your document, change the above code to this:
<a href="/yourlinkhere" class="cssmouseover"
Replace pathto/image.jpg with the path to your mouseover image for that specific occurence, relative to the document URL.
CSS Code…The meat and potatoes
Now that the basic HTML code is there, we tell the browser what to do with CSS.
For the first example, the css code needed to create the mouseover effect is as follows:
If you are utilizing the second example, with several instances of the mouseover effect in one page, simply remove the ‘background-image:url’ tag in the a.cssmouseover reference since you will be controlling that css property directly in the document.
As you can see, the code above is simply using the background-position property of css to shift the image upwards 300px when the area is hovered over. In this case, the pathto/image.jpg needs to be relative to the CSS file where this code is placed, or if you placed it directly into the document of course it will be relative to the document.
Using Other Tags Besides A in your CSS Mouseover
You can certainly use other tags besides A, as almost any HTML element can be displayed as a block with a background image. The trick is that many browsers do not support HOVER effects on any tag except the A link tag. So, if you want to be compliant simply use the A tag for all your hovering needs.
There are also methods of putting all the above CSS code directly into the HTML using the ’style’ attribute. I typically avoid this as it is messier, but if you are using several different sized images and different mouseover effects you might have to do this anyway. Every time you call the .cssmouseover effect in the example above the browser will assume the image area displayed is 200px by 300px, which may or may not be true for all of your images.
Simply add or change the width and height properties in the CSS file or directly on the page via style=”" and you are good to go.
It loads fast as well, as you are only loading a single image, and the mouseover effect is really just an illusion as the image is sliding out of your view. See an example below: