Hiệu Ứng Phóng To Ảnh Khi Rê Chuột Vào Ảnh

Xin giới thiệu cho các bạn một hiệu ứng phóng to hình ảnh khi bạn rê chuột vào ảnh. Khi chưa rê chuột vào ảnh, ảnh sẽ nhỏ và có hiệu ứng mờ ảo nhưng khi rê chuột vào thì ảnh lớn và sáng hẳn lên. Hiệu ứng này khá đẹp mắt cho những blogspot có bộ sưu tập ảnh.
Hiệu ứng này là hoàn toàn tự động ta không phải thêm thao tác thủ công nào khi post bài.Nếu đặt đoạn code trên vào trong mẫu thì toàn bộ ảnh của blogspot đều nhận được hiệu ứng phóng to ảnh khi rê chuột.

Nguồn : dautoblog.com

Xem demo: rê chuột vào ảnh để xem demo nhé

Áp dụng vào blogspot:

Các bước thực hiện:
1. Các bạn vào Thiết kế rồi Chỉnh sửa HTML
2. Thêm đoạn Code dưới đây trước thẻ ]]></b:skin>

CODE:

.post img{
-webkit-transform:scale(0.8); 
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s; opacity: 0.7;
margin: 0 10px 5px 0;} 
.post img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray; opacity: 1;}

Các bạn có thể thay đổi số tô xanh theo ý muốn:

- 0.8 : độ thu nhỏ của ảnh khi chưa rê chuột (muốn ảnh bình thường thì đặt là 1)
- 0.5s : thời gian từ khi rê chuột vô ảnh tới khi ảnh Max
- 1.1 : độ phóng to của ảnh khi rê chuột vào.Số càng lớn phóng càng to ^^,nhưng để tới 1.3 thôi
- Thích hợp trên các trình duyệt : Firefox 3.6+ , G.Chrome , Safari 4+ , Opera 9.5+ .
- Không áp dụng trên IE .
- Nếu ko thích hiệu ứng mờ ảo khi chưa rê chuột vào ảnh thì thay các trị số màu đỏ thành 1