logo-dw

by Andromeda

Based in New Zealand, Andromeda and her husband run a business named New Day Ltd. Specializing in professionally designed web sites at affordable prices and computer support for small to medium sized businesses.

Hovering over the small image shows a bigger image

This tutorial will show you how to display a larger image when you mouse over a smaller image.

Demo

How it's done

This is the relevant css

#picture {width:100px; height: 250px; background-color:#ffffff;}
#picture a.small, #picture a.small:visited { display:block; width:100px; height:100px; text-decoration:none; background:#ffffff; top:0; left:0; border:0;}
#picture a img {border:0;}
#picture a.small:hover {text-decoration:none; background-color:#000000; color:#000000;}
#picture a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#picture a.small:hover .large {display:block; position:absolute; top: 90px; left:150px; width:200px; height:200px; }

And this is the relevant html

<div id="picture">
<a class="small" href="#nogo" title="small image"><img src="images/jupiter-s.jpg" title="small image" />
<img class="large" src="images/jupiter-l.jpg" title="large image" /></a>
</div>

Let's look at the css and html that make the magnification happen.

#picture a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}

You are telling any links within the picture div, with the .large class specified, that they are to display as nothing! Take a look at the code. 0 width, 0 height, 0 border!! Any links with the .large class specified won't be seen UNLESS itís hovered over AND has the .small and .large classes specified because you have a separate rule for "hover .small .large" which is:

#picture a.small :hover .large {display:block; position:absolute; top:-65px; left:150px; width:200px; height:200px;}

This tells the element that instead of being 0 x 0 in size it's to be 200 x 200 and voila! You can see the picture! Clever isnít it!

Magnify an image

<div id="picture">
<a class="small" href="#nogo" title="small image"><img src="images/jupiter-s.jpg" title="small image" />
<img class="large" src="images/jupiter-l.jpg" title="large image" /></a></div>

As you will see from the html code above your anchorís class is .small and your image class is .large. So if your link is hovered over then

#menu a.p1:hover .large {display:block; position:absolute; top:-65px; left:150px; width:300px; height:300px;

Will apply.

Anchowledgement goes to Stu Nicholl's CSS Play