Tạo hiệu ứng ảnh phóng to khi rê chuột vào cho blogspot

Trang blog mình đang có nhiều hình ảnh đẹp nên dự định sẽ tạo một hiệu ứng nho nhỏ nào đó thật đặt biệt cho người xem. Thật may sau một hồi mò mẫm cũng tìm được đoạn code nhỏ gọn nhưng khi chạy trên blog cực kỳ mượt mà đặt biệt sẽ không ảnh hưởng gì về tốc độ tải trang hay xung đột code hết. Hiệu ứng phóng to ảnh khi rê chuột vào sẽ phù hợp với trang của các bạn nào có nhiều hình ảnh

HÌnh ảnh phóng to hơn và mượt hơn khi chèn code vào blog

Các bạn có thể xem trang demo mà mình đã chèn hiệu ứng phóng to ảnh này vào rồi ở đây:

 trang demo hiệu ứng phóng to ảnh cực mượt

Cách làm đơn giản như sau. Các bạn chép hết đoạn code bên dưới nhé

/*! phong to anh khi re chuot vao */
img{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease;max-width:100%}
img:hover{-webkit-transform:scale(1.25);-moz-transform:scale(1.25);-ms-transform:scale(1.25);-o-transform:scale(1.25);transform:scale(1.25)}
img{max-width:100%;overflow:auto}

Rồi tìm đến thẻ   ]]></b:skin>  và chèn trước nó

Xong lưu lại là xong

Đến đây các bạn có thể điều chỉnh thêm một chút để phù hợp với web của các bạn bằng cách thay đổi thông số độ trễ hiệu ứng và tỷ lệ phóng to thực tế

1-Đỗ trễ hiệu ứng : đang là 1s có thể điều chỉnh thêm bớt thời gian thích hợp
2-Tỷ lệ phóng to là 1.25 có thể điều chỉnh tăng lên 1.5 hay giảm nhỏ khoảng 1.05 nhé