magnify image

sher_amf · Joined: 19 Dec 2007 Posts: 18

how is it to magnify image when the mouse is over the image? exactly like this...
http://www.cssplay.co.uk/menu/magnify.html

sticks464 · Joined: 31 Dec 2006 Posts: 2624

Use 'View', 'Source'. The css is is in the head section and the html is the 'menu' div.

sher_amf · Joined: 19 Dec 2007 Posts: 18

so how is it done? i dont understand the codes too long

ogsolution · Joined: 26 Dec 2007 Posts: 144

These are the lines you should look at from that site's source.
------------------------------------------------
<style type="text/css">
#menu a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#menu a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#menu a.p1:hover .large {display:block; position:absolute; top:-65px; left:150px; width:300px; height:300px; border:10px solid #ccc;}
</style>

<div id="menu">
<a class="p1" href="#nogo" title="thumbnail image"><img src="../img/tdrips.jpg" title="Thumbnail image" alt="Thumbnail image" /><img class="large" src="../img/drips.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a>
</div>
------------------------------------------------
The trick is the hover command in CSS. The large image is initially set to 0 width and 0 height. When you mouseover the small image, it will trigger the last CSS rule that sets the large image to 300px width and 300px height. That's how you can see the large image when you mouseover the small image.

sher_amf · Joined: 19 Dec 2007 Posts: 18

wait i dont know how to use css only html..

ogsolution · Joined: 26 Dec 2007 Posts: 144

Hope this is clear enough. You just need to prepare a small image and a big image.