Forums, articles and tutorials Dreamweaver, PHP, HTML and CSS

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.

Home > Tutorials > Dreamweaver Tutorials > Hovering over the small image shows a bigger image

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