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
Demo:
Cách làm:
<!-- Tạo cửa sổ popup khi rê chuột vào ảnh -->
Tags:
Demo:
 |
| Code ảnh phóng to khi rê chuột vào ảnh đại diện |
Cách làm:
<!-- Tạo cửa sổ popup khi rê chuột vào ảnh -->
<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: 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ị ảnh popup*/
top:0px;
left:0px;
}
</style>
<body>
......
<a class='img-thumbnail' href='#'>
<img alt='' height='140' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLd0Fb7Fmp-N_SJtUm7Cw4ULWKPowVtqkQL8clnReYEoOLlzxi9UZk6aS3HkvBXEUQhq5E3QXIWij1a7eySDEU64SF5S3xbmEXKLdnH20tA_gu_uNMN8jXcISEu3C5549STRLBchDx0VZL/s1600/can-ho-3-phong-ngu.jpg' style='padding:10px 18px;' width='190'/>
<span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmNx6EYDc5CDVa6ptQBn74uWeQ8OFC92dA6Y9XhvolPzzQaAcOfpF0_90Vh6pfg32EryrSZmCSJz86SH6pALAnkDgvrgK6MLaQwQ_7Wx9Vg68-75-YBT4pZbUrWeK6-iKdyjCW0XD5i0s/s1600/thumbnail+(14).jpg'/></span></a>
.....
</body>
Chúc các bạn thành công
.jpg)
Không có nhận xét nào: