PDA

View Full Version : Image effect ( Image magnifier)



Shawn67
10-28-2008, 08:27 PM
Could anyone, please, tell me how and what coding should I add to my webside code to have an image showing larger when mouse goes on the image? From Dynamic site I found one javaScript and added to my coding but did not work because it was complicated for me. I appreciate your help.

Shawn

rangana
10-29-2008, 01:26 AM
CSS will do:


<base href="http://rangana.moonylist.com/images/">
<style type="text/css">
ul{list-style-type:none;}
ul li{
margin:5px;
}
ul a img{
border:1px solid #222;
width:150px;
height:100px;
}
ul a:hover img{
width:400px;height:330px;
vertical-align:middle;
}
</style>
<ul>
<li><a href="#"><img src="Picture4.jpg" alt="mypics"></a></li>
<li><a href="#"><img src="Picture5.jpg" alt="mypics"></a></li>
<li><a href="#"><img src="Picture7.jpg" alt="mypics"></a></li>
<li><a href="#"><img src="Picture8.jpg" alt="mypics"></a></li>
<li><a href="#"><img src="Picture9.jpg" alt="mypics"></a></li>
</ul>