How To Implement Mouseover Images

Image mouseover effects are rife on the web. They add some extra design prowess to a project if carefully implemented. The bad side is that if done incorrectly, they can hamper the web site by applying slow loading pages and cross-browser compatibility problems. By using CSS, you can avoid this bad turn of fate by applying some easy styles.

For this example you will need the images here

This example is great if you wish to set up a photo gallery on your site. Galleries work very effectively towards attracting business when placed on designer portfolio sites, commercial template sites and development services showing client template screenshots. Here is a screenshot of the effect using just the two images for use in the code:

The thumbnail images can be expanded with little effort without the use of JavaScript. This makes it easy to implement for any usage on any web page. Additionally, this more dynamic functionality decreases the loading time of the page in displaying the original size of the gallery image.

Now for the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type"

content="text/html; charset=iso-8859-1" />

<title>Mouse-over – Image gallery</title>

<style type="text/css">

.showhide{

position: relative;

z-index: 0;

}

.showhide:hover{

background-color: transparent;

z-index: 10;

}

.showhide span{

position: absolute;

background-color: 00000f; /*Setting
Background of the expanding image */

padding: 15px;

left: -1500px;

border: 1px dashed gray; /* Setting
borders to the expanding image */

visibility: hidden; /* Setting normal
visibility as hidden */

color: black;

text-decoration: none;

}

.showhide span img{

border-width: 0;

padding: 5px;

}

.showhide:hover span{

visibility: visible; /* Onmouseover
sets the image visibility true for displaying the original size */

top: 0;

left: 50px;

}

</style>

</head>

<body>

<h3>Roll the mouse over the image
to display the original size of the image</h3>

<a class="showhide" href="#"><img
src="ex1.jpg" width="100px" height="66px"

border="0" /><span><img src="ex1.jpg"
/></span></a>

<a class="showhide" href="#"><img
src="ex2.jpg" width="100px" height="66px"

border="0" /><span><img src="ex2.jpg"
/></span></a>

</body>

</html>

Depending on the requirements for your page, the style .showhide has parameters that can be quickly altered to fit your gallery size. It’s important that the original images are not large so use Photoshop or whatever design tool you prefer to reduce the width and height for the original image displayed on the page.

Another useful edit is to change the position of the image depending on its position in the thumbnail gallery. If you have a page of about 100 images, as on Flickr, then create a separate style using the above values to display images shown by thumbnails lower down the page above the thumbnail image rather than below it.

If you need an image gallery or a few mouseover effects, you now have the code.

Leave a comment