Hiệu ứng Zoom, Phóng To Hình ảnh Khi đưa Chuột Vào

Trang chủ » Hiệu ứng Zoom ảnh Css3 » Hiệu ứng Zoom, Phóng To Hình ảnh Khi đưa Chuột Vào

Có thể bạn quan tâm

CODE BÀI VIẾT <div class="thu-nghiem-zoom"> <div> <img title="" src="https://caodem.com/wp-content/uploads/hinh-thu-nghiem-caodem.png" width="100%" /> </div> </div> <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> Hiệu ứng zoom, phóng to hình ảnh khi đưa chuột vào Html & Css ihoan đã viết 3 năm trước

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

10235 Bài viết cùng chủ đề

Hướng dẫn CSS border gradient

Chia cột bằng thuộc tính display flex trong CSS

Chia cột bằng thuộc tính display grid trong CSS

Thay đổi màu link khi di chuột vào

Hiệu ứng Hover cho hình ảnh khi đưa chuột vào

Tạo mã QR với thư viện QRcode

Hiển thị menu khi click chuột phải như ở màn hình máy tính

Crop hình ảnh bằng CSS đơn giản và cần thiết

Căn giữa Hình ảnh, thẻ Div, Text trong CSS

Xóa bỏ gạch chân cho link trong html css

Từ khóa » Hiệu ứng Zoom ảnh Css3