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>
Hình minh họa khi chưa re chuột:
Hình minh họa khi rê chuột :
