» » » Hiệu ứng phóng to ảnh khi rê chuột cho website và blogger

Hiệu ứng phóng to ảnh khi rê chuột cho website và blogger

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é!

hiệu ứng phóng to ảnh
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
 Trong bài viết sử dụng dòng code này

 
<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!
Đi lên