Share Hiệu ứng phóng to hình ảnh khi rê chuột lên hình ảnh

filiallion · 04/04/2018

Chức năng phóng to hình ảnh khi các bạn rê chuột lên hình ảnh là một trong những hiệu ứng thường thấy hiện nay trên các website, nhất là các website dạng tin tức hoặc blog. Đây là một hiệu ứng chuyển động đẹp, bắt mắt giúp người dùng cảm thấy thú vị khi xem website. Chức năng này sử dụng các thuộc tính 2D transform có trong CSS3 dùng để xử lý hiệu ứng di chuyển 2D, ví dụ các bạn có thể phóng to, thu nhỏ khi rê chuột vào một phần tử HTML nào đó.

Việc thiết kế chức năng này với HTML và CSS3 là rất đơn giản, các bạn tham khảo một vài dòng lệnh đơn giản mà tôi hướng dẫn sau đây là có thể hoàn thành hiệu ứng này để áp dụng vào website của các bạn rồi.

Nội dung mã lệnh HTML:

HTML:

<div class="thumbnail">
    <img src="path/to/image.jpg">
</div>

Nội dung mã lệnh CSS:

CSS:

.thumbnail {
    width: 500px;
    height: 300px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    transition-duration: 0.3s;
}

.thumbnail img:hover {
    transform: scale(1.2);
}

Share Hiệu ứng phóng to hình ảnh khi rê chuột lên hình ảnh

filiallion

Administrator