Hover phóng to ảnh css
Chào các bạn, hôm nay mình hướng dẫn các bạn viết chức năng phóng to thumbnail khi hover chuột bằng CSS3. 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ụ bạn có thể phóng to, thu nhỏ khi hover chuột vào một phần tử HTML nào đó, ... Chính vì những ưu điểm tuyệt vời đó nên mình sẽ áp dụng nó vào chức năng này. Chúng ta bắt tay vào việc thôi ! Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. 1.Ý tưởng thực hiệnĐể mình nói sơ qua về ý tưởng thực hiện của mình. Chức năng phóng to thumbnail khi hover chuột này đang rất phổ biến và được sử dụng rộng rãi trên nhiều website, đặc biệt là các blog, trang tin tức, ... Nó tạo hiệu ứng chuyển động đẹp, bắt mắt giúp người dùng cảm thấy thú vị, vì thế khách sẽ ở lại trang của bạn lâu hơn và thu hút được nhiều người truy cập hơn. Cho nên vì thế mình làm bài viết này để giúp các bạn thực hành một số kiến thức về CSS3, vừa có thể tích hợp chức năng vừa tiện lợi vừa nhỏ gọn này vào trong website của mình. 2. Xây dựng chức năngViết HTMLĐầu tiên các
bạn tạo file Bài viết này được đăng tại [free tuts .net]
Trong đó :
Viết CSSTrước tiên chúng ta sẽ viết CSS cho khung chứa thumbnail trước, các bạn copy đoạn code sau và dán vào bên trong cặp thẻ /* Khung chứa thumbnail */ .thumbnail { width: 300px; height: 200px; overflow: hidden; border: 1px solid #e5e5e5; } Giải thích:
Tiếp theo là thumbnail, các bạn chèn tiếp nội dung sau vào bên dưới : /* Thumbnail */ .thumbnail img { width: 100%; height: 100%; transition-duration: 0.5s; /* Safari */ -webkit-transition-duration: 0.5s; /* Mozilla Firefox */ -moz-transition-duration: 0.5s; /* Opera */ -o-transition-duration: 0.5s; /* IE 9 */ -ms-transition-duration: 0.5s; } Giải thích:
Cuối cùng là phần quan trọng nhất trong bài này, đó chính là viết sự kiện hover chuột vào thumbnail thì sẽ phóng to ảnh lên. Copy và chèn đoạn code sau vào bên dưới : /* Hover chuột vào thumbnail */ .thumbnail img:hover { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); cursor: pointer; } Giải thích: Thuộc tính Đây là toàn bộ code của phần này : /* Khung chứa thumbnail */ .thumbnail { width: 300px; height: 200px; overflow: hidden; border: 1px solid #e5e5e5; } /* Thumbnail */ .thumbnail img { width: 100%; height: 100%; transition-duration: 0.5s; /* Safari & Google Chrome */ -webkit-transition-duration: 0.5s; /* Mozilla Firefox */ -moz-transition-duration: 0.5s; /* Opera */ -o-transition-duration: 0.5s; /* IE 9 */ -ms-transition-duration: 0.5s; } /* Hover chuột vào thumbnail */ .thumbnail img:hover { transform: scale(1.2); /* Safari & Google Chrome */ -webkit-transform: scale(1.2); /* Mozilla Firefox */ -moz-transform: scale(1.2); /* Opera */ -o-transform: scale(1.2); /* IE 9 */ -ms-transform: scale(1.2); cursor: pointer; } OK ! Giờ các bạn chạy và xem thành quả của mình nhé ! 3. Lời kếtĐây là một bài tập nho nhỏ giúp các bạn có thể ôn lại và thực hành về CSS3 Transform 2D, điều đặc biệt hơn là có thể tích hợp thành quả của mình sau bài này vào website, blog của bạn. Chúc các bạn thành công ! |