×

Phóng to hình ảnh khi di chuột vào

Hover zoom images

Khi bạn di chuyển con trỏ chuột vào vị trí hình ảnh, thì lập tức hình ảnh sẽ phóng to lên, trong vô cùng thú vị và đẹp mắt. Với phương pháp này bạn có thể áp dụng trong nhiều kiểu thiết kế hình ảnh cho web, như tạo hiệu ứng phóng to cho hình đại diện bài viết.

Ví dụ:

Bạn hãy di mũi tên chuột vào hình ảnh để xem thử hiệu ứng

Cách tạo hiệu ứng phóng to hình ảnh khi di chuột vào

Cấu trúc html như sau.

<div class="thu-nghiem-zoom">
<p><img title="" src="/hinh-anh-thu.jpg" alt="" /></p>
</div>

CSS tạo hiệu ứng.

<style>
.thu-nghiem-zoom img{display:block;transition: all .3s ease;}
.thu-nghiem-zoom img:hover{transform: scale(1.5);}
.thu-nghiem-zoom p{display:block;overflow: hidden;}
</style>

Lưu ý: Hình ảnh tạo hiệu ứng có thể được bao bọc bởi các thẻ (p, a, span) chứ không nhất thiết phải là thẻ p như ví dụ trên nhé!

171
Bài cùng chủ đề