Share Tạo hiệu ứng khi hover hình ảnh với thư viện Hover Effect Ideas

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Trên các website đẹp, ngoài nội dung thì hình ảnh là một phần không thể thiếu, vì vậy các hiệu ứng với hình ảnh thường được các bạn lập trình viên quan tâm. Việc tạo ra các hiệu ứng đẹp cho hình ảnh giúp cho website trở nên chuyên nghiệp hơn. Hiện nay có rất nhiều cách để tạo hiệu ứng cho hình ảnh và trong số đó là hiệu ứng khi các bạn hover lên hình ảnh. Để thực hiện được hiệu ứng này các bạn cũng có nhiều thư viện CSS và JavaScript, một trong số đó là thư viện CSS Hover Effect Ideas.

Hover Effect Ideas là một thư viện CSS nhỏ gọn cung cấp tới 30 hiệu ứng khi các bạn hover lên hình ảnh, các bạn có thể xem qua 30 hiệu ứng hover hình ảnh tại địa chỉ https://tympanus.net/Development/HoverEffectIdeas.

Nếu các bạn thấy các hiệu ứng hover hình ảnh của thư viện Hover Effect Ideas là phù hợp với yêu cầu thiết kế của các bạn thì có thể tải tại địa chỉ http://tympanus.net/Development/HoverEffectIdeas/HoverEffectIdeas.zip. Sau đó, các bạn tích hợp vào website với nội dung mã lệnh HTML như sau:
HTML:
<link href="path/to/normalize.css" rel="stylesheet">
<link href="path/to/set1.css" rel="stylesheet">
<link href="path/to/set2.css" rel="stylesheet">
Bây giờ, các bạn có thể tạo hiệu ứng hover hình ảnh với thư viện Hover Effect Ideas như ví dụ sau:
HTML:
<figure class="effect-lily">
    <img src="path/to/image.jpg">
    <figcaption>
        <h2>Welcome to <span>Gextend</span></h2>
        <p>Description</p>
        <a href="#">View more</a>
    </figcaption>
</figure>
 
Back
Top