To achieve an image mouseover effect with CSS, you only need a
few lines of code an a single image. No javascript and no dependency on
clunky onload() or onmouseover() events. Another great part about
this method is that you will be utilizing a single image, rather than
two images (inactive state and active state), so it is ultra fast, with
no additional image to load.
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 100px high (the displayable
area). This means, you need to create an image that is actually 200px
wide by 200px 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 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"
style="background-image: url('/pathto/image.jpg');"></a>
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:
a.cssmouseover {
display:block;
width:200px;
height:100px;
background-image:url(pathto/image.jpg);
background-position:0px 0px;
}
a.cssmouseover:hover {
background-position:0px -100px;
}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 100px 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 100px, 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.
If You Enjoyed This Post Please Take 5 Seconds To Share and Leave your Comments
