Image effect ( Image magnifier)

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

CSS will do:

HTML Code:

---

<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>

---