CSS - Phóng To Ảnh Khi Rê Chuột Lên

Vấn đề là ta có bức ảnh khi đưa lên Web ta jumb lại với kích thướt nhỏ, làm sao khi user muốn xem kích thướt thật của ảnh, ta dùng CSS để trả lại kích thướt thật khi rê chuột lên ảnh.

Demo:

<html>
<head>
<style type='text/css'>
.img-thumbnail{
position: relative;
z-index: 0;
}
.img-thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.img-thumbnail span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -100px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}
.img-thumbnail span img{
border-width: 0;
padding: 2px;
}
.img-thumbnail:hover span{
visibility: visible;
top: -75x;/* thay doi chi so de anh hien o vi tri mong muon*/
left:-1px;/* thay doi chi so de anh hien o vi tri mong muon*/
}
</style>
</head>
<body>
<a class="img-thumbnail" href="#">
<img src="thiennhien.jpg" border="0" height="100" width="110"/>
<span>
<img src="thiennhien.jpg"/>
</span>
</a>
</body>
</html>