Share Tạo hiệu ứng hover đơn giản với thư viện Simple Hover

filiallion · 02/19/2021

Nếu các bạn muốn thiết kế hiệu ứng hover kèm với nội dung cho hình ảnh hay đối tượng bất kỳ thì thư viện Simple Hover là một sự lựa chọn tốt. Tên gọi của thư viện đã cho biết việc sử dụng rất đơn giản, chỉ với vài khai báo mã lệnh HTML là các bạn đã có thể tạo hiệu ứng hover.

Hiện tại, thư viện Simple Hover cung cấp không quá nhiều hiệu ứng nhưng các hiệu ứng đang có đều được thiết kế tốt với chuyển động mượt, đáp ứng được việc trình bày nội dung khi hover. Ngoài ra, với dung lượng thư viện nhỏ cũng giúp cho việc tích hợp thêm dễ dàng hơn khi các bạn không cần phải quá quan tâm tới hiệu năng của website.

Để sử dụng thư viện Simple Hover, các bạn tải tại địa chỉ https://github.com/thepinecode/simple-hover và tích hợp vào website với dòng mã lệnh HTML như sau:

HTML:

<link href="path/to/simple-hover.css" rel="stylesheet">

Bây giờ, các bạn thử tạo hiệu ứng hover có kèm nội dung như ví dụ sau:

HTML:

<a href="#" class="sh-container sh-effect--alpha">
    <div class="sh-effect--alpha__overlay">
        <h1 class="sh-effect--alpha__title">Title</h1>
        <p class="sh-effect--alpha__meta">Meta</p>
    </div>
    <img src="path/to/image.jpg" class="sh-effect--alpha__image">
</a>

Các bạn có thể tìm hiểu thêm các hiệu ứng hover khác của thư viện Simple Hover tại địa chỉ https://pineco.de/project/simple-hover.

Share Tạo hiệu ứng hover đơn giản với thư viện Simple Hover

filiallion

Administrator