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 :
1 nhận xét:
Mong bác hướng dẫn lại giúp mình. có gì bác gửi tinh nhắn qua mail này giúp mình với nha thanks !
vuong.pccc114@gmail.com
Đăng nhận xét
Vui lòng viết Tiếng Việt có dấu !