Share Hiệu ứng hover hình ảnh đẹp mắt với thư viện SlipHover

[filiallion]

Language

Tiếng Việt

Mặc định với CSS các bạn hoàn toàn có thể tạo ra các hiệu ứng đẹp mắt khi hover lên hình ảnh hay bất kỳ thành phần nào. Tuy nhiên, việc sử dụng CSS để thực hiện các hiệu ứng phức tạp thì đòi hỏi các bạn phải mất nhiều công sức để viết mã lệnh. Với thư viện SlipHover thì mọi thứ lại trở nên đơn giản hơn rất nhiều chỉ với vài dòng lệnh cài đặt đơn giản.

Các bạn lưu ý là thư viện SlipHover yêu cầu phải có jQuery. Các bạn tải thư viện jQuery tại địa chỉ http://jquery.com/download.

Các bạn tải thư viện SlipHover tại địa chỉ http://wayou.github.io/SlipHover.

Các bạn tích hợp thư viện SlipHover vào website với dòng lệnh như sau:

<script src="path/to/jquery.sliphover.min.js"></script>

Và cài đặt thư viện với nội dung mã lệnh như sau:

$(function() {
    $('#sliphover').sliphover();
});

Với cài đặt như trên thì toàn bộ các hình ảnh trong thành phần có id là sliphover đều được áp dụng hiệu ứng của thư viện SlipHover, ví dụ như sau:

<div id="sliphover">
    <img src="path/to/image-1.jpg" title="Title 1">
    <img src="path/to/image-2.jpg" title="Title 2">
    <img src="path/to/image-3.jpg" title="Title 3">
</div>

Các bạn có thể tìm hiểu thêm về thư viện SlipHover tại địa chỉ http://wayou.github.io/SlipHover.