Hiệu ứng phóng to hình ảnh khi rê chuột vào bằng CSS3

How to Smoothly Zoom Images on Mouse Hover Using CSS3

Bạn có thể đã thấy tính năng này trong nhiều website. Khi rê chuột vào hình ảnh sẽ tự phóng to ra, và sẽ trở lại kích thước ban đầu khi rê chuột vào nơi khác. Thủ thuật này thực hiện hoàn toàn dựa trên CSS3 nên không ảnh hưởng đến tốc độ tải trang của bạn, không JQuery, không JavaScript.

• DEMO

Hiệu ứng phóng to hình ảnh khi rê chuột vào bằng CSS3

Với code CSS này bạn có thể phóng to toàn bộ hình ảnh trong blog mà không cần phải chỉnh sửa code post ảnh gì cả.

1Vào Mẫu >> Chỉnh sửa HTML, chèn đoạn code sau trước thẻ ]]></b:skin>

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}

2Chỉnh sửa: scale(1.25) là bạn phóng to 125% kích thước ảnh, bạn có thể tùy chỉnh lại kích thước theo ý muốn của mình.

3Kết hợp với thủ thuật dưới đây thì chúng ta sẽ có được những hiệu ứng về hình ảnh khá cool đấy.

Xem thêm: Hiển thị icon kính lúp phóng to khi rê chuột vào hình ảnh cho Blogger

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by mbx/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm