Hiệu ứng phóng to ảnh khi rê chuột là thủ thuật hiệu ứng cực đẹp cho website và blog. Với hiệu ứng này tạo cho website của bạn trở nên đẹp hơn. Hiệu ứng phóng to ảnh được thực hiện bằng HTML và CSS. Dưới đây là code hiệu ứng phóng to ảnh các bạn tham khảo nhé!
Đối với website bạn đặt trong cặp thẻ <style>...</style> trong phần header. Còn blogger thì Ctrl + F tìm đến thẻ ]]</b:skin> và chèn trước nó
Chú ý:
Ok hiệu ứng phóng to ảnh khi rê chuột đã hoàn tất. Chúc bạn thành công!
hiệu ứng phóng to ảnh |
Hiệu ứng phóng to ảnh khi rê chuột cho website và blogger
Đối với website bạn đặt trong cặp thẻ <style>...</style> trong phần header. Còn blogger thì Ctrl + F tìm đến thẻ ]]</b:skin> và chèn trước nó
Code hiệu ứng phóng to ảnh khi rê chuột
.hoverimage img{
-webkit-transform:scale(0.8); /*Webkit: Thu nhỏ kích thước ảnh còn 0.8 so với ảnh gốc*/
-moz-transform:scale(0.8); /*Thu nhỏ đối với Mozilla*/
-o-transform:scale(0.8); /*Thu nhỏ đối với Opera*/
-webkit-transition-duration: 0.5s; /*Webkit: Thời gian phóng to, nhỏ ảnh*/
-moz-transition-duration: 0.5s; /*Như trên*/
-o-transition-duration: 0.5s; /*Như trên*/
opacity: 0.7; /*Độ mờ của hình ảnh*/
margin: 0 10px 5px 0; /*căn đều giữa ảnh*/
}
.hoverimage img:hover{
-webkit-transform:scale(1.1); /*Webkit: Tăng kích cỡ ảnh lên 1.1 lần*/
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray; /*Đổ bóng bằng CSS3*/
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1; /*Độ mờ của hình ảnh*/
}
Chú ý:
- .hoverimage img là CSS của hình ảnh bình thường
- .hoverimage img:hover là CSS của hình ảnh khi rê chuột vào
<div class="hoverimage">
<img src="URL hình ảnh" />
</div>
Ok hiệu ứng phóng to ảnh khi rê chuột đã hoàn tất. Chúc bạn thành công!
ConversionConversion EmoticonEmoticon