How to Create Image Swap Effect using CSS

The image swap effect is a very common thing for those freelance web designers and those working in web design companies. For navigational purposes, it can make menus much easier on the eyes by highlighting the user’s pick. This helps to prevent misclicks, and looks nice as well. When you want to create an image swap effect, the standard procedure is usually to throw in an OnMouseOver event in JavaScript.

Unfortunately, there are a number of disadvantages to this approach, like the fact that a large number of people have JavaScript disabled in their web browser for security purposes. Thankfully, the same effect can be created using standard HTML and a neat trick using CSS.


Here’s how the trick works for CSS. First you’ll create a division in your code with the div tag and give it a class. Inside of the division, you’ll place the image in standard image tags that will be used for when the mouse is not over the designated area. Next, you’ll add a background image to the division’s class using CSS, and this image will be the one that appears when the mouse is over the designated area.

Finally, you’ll add a piece of CSS that changes the display attribute to “block” for the anchor tags within the div class you created, as well as changing the display attribute to “hidden” for when the mouse hovers over anchors tags inside of that division class.

While this is a little tricky to understand conceptually, in practice it’s much easier to see. Here is a sample piece of code that achieves this effect:

<div>
<a href="#">
<img src="logo.gif" width="187" height="136" alt="" />
</a>
</div>

And the CSS to go along with it:

div.nav {
 height: 187px;
 width: 136px;
 margin:0;
 padding:0;
 background-image:url("logo-red.gif");
 }
div.nav a, div.nav a:link, div.nav a:visited {
 display:block;
 }
div.nav img {
 width:100%;
 height:100%;
 border:0;
 }
div.nav a:hover img {
 visibility:hidden;
 }

The way this works is that when you hover over the anchor image in the swap division, the CSS hides that piece of content so that only the background image of the division is seen. It’s a neat trick that a lot of people, even professional web site programmers, don’t know about.

When using this, there are a number of important points to keep in mind. Before you start working with the code and CSS, you should have the images and layout prepared. If you don’t, then any small change in your images will require multiple changes in your code, and this wastes time and can lead to mistakes that are hard to detect. Next, remember to place the “before mouseover” image in the image tags, and the “after mouseover” image as the background.

As you might expect if you are familiar with web design, you’ll need to make an adjustment for users on Internet Explorer. The reason for the tweak for Internet Explorer is that this particular browser has problems storing background images in the cache. This results in a sort of random blue and red flashing when the mouse goes over the division image. Also with IE, you’ll need to make sure that you don’t have the “background-position” attribute set for this fix to work since that will bring back the flashing problem. Here is the fix, which can be put in with or without the conditional comments.

< !-- [if lte IE 6]>
< style type=”text/css”>
div.swap {
background-repeat: no-repeat;
}
div.swap a:hover {
visibility: visible;
}
< /style>
< ![endif]-->

One disadvantage of this method is that it will greatly increase the size of your CSS file if you use it for a large set of menus, but this is minor since CSS files load very quickly as they are just simple text. It’s also not a problem for file sizes on the server since most people use some form of unlimited hosting.

Download sample here.