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

Khi bạn rê chuột vào ảnh trong blogspot.
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ó 2 loại code:

- Một loại sau khi cài code thì toàn bộ ảnh trong blogspot đều có hiệu ứng phóng to khi rê chuột vào ảnh.
- Một loại sử dụng theo cách thủ công tức là chỉ ảnh ta chỉ định thì mới có hiệu ứng trên.

Áp Dụng Vào Blogspot

Kiểu 1
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>

.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
Kiểu 2
Thủ thuật này ta áp dụng cho ảnh nào mà bạn muốn có hiệu ứng phóng to khi rê chuột vào ảnh 

Rê chuột vào ảnh để xem hiệu ứng Để thực hiện thủ thuật này tại mỗi bài viết hay ở tiện ích nào đó bạn dán đoạn css sau vào bên soạn thảo HTML

<style>
.zoom-img img{width: 70px; height: 70px; border:0; -webkit-transition:-webkit-transform 0.3s ease-in; -o-transition:-o-transform 0.3s ease-in; }
.zoom-img img:hover{-moz-transform:scale(2.5); -webkit-transform:scale(2.5);-o-transform:scale(2.5);}
</style>

Trong đó:
- width: 70px; height: 70px; là kích thước ảnh do bạn quy định
- transform 0.3s ease-in là thời gian chuyển kích thước từ bắt đầu rê chuột vào ảnh tới khi ảnh đạt kích thước cực đại
- scale(2.5) là tỷ lệ phóng to(gấp 2,5 lần so với ban đầu)
Bước tiếp theo là ta sử dụng code sau để post ảnh:

<div class="zoom-img" style="text-align:center">
<img src="Link ảnh" />
</div>

Chúc các bạn thành công!

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait