Code ảnh phóng to khi rê chuột vào ảnh đại diện
Một số đoạn css khá hữu ích và phổ biến các bạn có thể áp dụng vào blog của mình, dưới đây mình trích đoạn 1 đoạn css về ảnh, khi rê chuột vào ảnh đại diện thì ảnh sẽ phóng to ra một kích thước nhất định do bạn định sẵn, code này thường dùng khi làm web bán hàng hoặc giới thiệu sản phẩm.
Ảnh minh họa
 |
| Code ảnh phóng to khi rê chuột vào ảnh đại diện |
Cách làm:
Copy code dưới dán vào sau thẻ <head>
<style type="text/css">Sử dụng đoạn code bên dưới, lưu ý chỉnh sửa lại vị trí hiển thị hình ảnh ở code bên trên.
.img-thumbnail{
position: relative;
z-index: 0;
}
.img-thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.img-thumbnail span{
position: absolute;
background-color: transparent;
padding: 0px;
left: -100px;
border: 0px solid #000;
visibility: hidden;
color: #000;
text-decoration: none;
}
.img-thumbnail span img{border: 6px solid #000;border-radius:5px;max-width:600px;
}
.img-thumbnail:hover span{
visibility: visible;position: relative;
/*Vị trí hiển thị hình ảnh*/
top:0px;
left:0px;
}
</style>
<a class='img-thumbnail' href='#'>.Chúc các bạn thành công!
<img alt='' height='140' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-c225SkbYrHrCKdS-b_TRnur6gqaH8p4h0Rpx49Iu3uT_Ak_J5Jc9ERqa1_ZmiFL1IczdPie9Tdw2d1q17h8vGLitXxvFXxcvc-Pye7keqm7zWt7Y63X9KrU6-9iOD5Cojyl683RPJngn/s1600/can-ho-3-phong-ngu.jpg' style='padding:10px 18px;' width='190'/>
<span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwQdrPUbV5Q7Nik6IGpJJUkEk7FlWncxDr7XqCEBkltBDTbLyjRy4YMbBsG934dmkKGLr5JBNi9pnRHROESOAwKJBNodJ3RLDm5ahkCjkrso71hpTL1lIIR34MxopX4kpcm0cKyD45ubY/s1600/thumbnail+(14).jpg'/></span></a>
Đăng nhận xét
Chào mừng bạn đã đến với blog nhật ký!