Hiệu ứng zoom, phóng to hình ảnh khi đưa 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.

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

<div class="thu-nghiem-zoom">
<div>
<img title="" src="https://caodem.com/wp-content/uploads/hinh-thu-nghiem-caodem.png" width="100%" />
</div>
</div>

Bên trên là cấu trúc HTML chứa hình ảnh, bao bọc bên ngoài sẽ là một thẻ div có class, bên trong sẽ có thêm một thẻ bao bọc ngoài hình ảnh, bạn có thể sử dụng thẻ div, p.. tuỳ ý.

<style>
.thu-nghiem-zoom img{
display:block;
transition: all .3s ease;
}
.thu-nghiem-zoom img:hover{
transform: scale(1.3); /* cỡ zoom khi di chuột vào */
} 
.thu-nghiem-zoom div{
display:block;
overflow: hidden;
}
</style>

CSS hiệu ứng thay đổi kích thước hình ảnh khi đưa con trỏ chuột vào