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

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

Hôm nay 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 nó. 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 blog có bộ sưu tập ảnh.

Các bạn đăng nhập vào Blogspot và chọn Mẫu rồi Chỉnh sửa HTML

Thêm đoạn Code dưới đây trước thẻ   ]]></b:skin>

.post img{ -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.8); /*Mozilla scale version*/ -o-transform:scale(0.8); /*Opera scale version*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ opacity: 0.7; /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between images*/ } .post img:hover{ -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.1); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ 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.5 : 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 không 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

Thế là xong, chúc các bạn thành công

Share Share Share

Thủ thuật