DANH MỤC

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

Đố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>

hiệu ứng phóng to ảnh khi rê chuột đã hoàn tất. Chúc bạn thành công!

CÓ THỂ BẠN QUAN TÂM

LIÊN HỆ ĐẤT XANH NAM TRUNG BỘ

CÔNG TY CP DV BĐS ĐẤT XANH NAM TRUNG BỘ

Địa chỉ: Tầng 8 Tòa nhà Sacombank, 76 Quang Trung, P. Lộc Thọ, TP. Nha Trang

Hotline: 0933 450 222

Website: datxanh79.com

Email: Vankhiemdxnt@gmail.com

ĐẤT XANH 79
Hotline: 0933 450 222
TẢI MẶT BẰNG - BẢNG GIÁ - CHÍNH SÁCH
Hotline
0933 450 222

Tên của bạn (*)

Địa chỉ Email (*)

Số điện thoại(*):

Dự án quan tâm: