Share Tạo hiệu ứng hover hình ảnh dành riêng cho Bootstrap với thư viện Bootstrap Image Hover

[filiallion]

Language

Tiếng Việt

Thư viện Bootstrap đã quá quen thuộc với các bạn thiết kế giao diện website và Bootstrap cũng là một trong các thư viện CSS được sử dụng nhiều nhất hiện nay. Với sự phổ biến cũng như sức mạnh của mình, Bootstrap nhận được sự qua tâm, đóng góp của nhiều lập trình viên bằng các thư viện mở rộng hỗ trợ riêng cho Bootstrap. Một trong số các thư viện hỗ trợ dành riêng cho Bootstrap phải kể đến đó là Bootstrap Image Hover. Nhiệm vụ duy nhất của thư viện Bootstrap Image Hover là tạo hiệu ứng hover khi rê chuột lên hình ảnh.

Hiện tại, thư viện Bootstrap Image Hover cung cấp khá nhiều hiệu ứng hover đẹp, các bạn có thể tham khảo tại địa chỉ https://miketricking.github.io/bootstrap-image-hover và cũng có thể tải về sử dụng cho dự án website của các bạn tại địa chỉ https://github.com/miketricking/bootstrap-image-hover.

Để sử dụng thư viện Bootstrap Image Hover, các bạn cần phải tích hợp thư viện Bootstrap trước. Sau đó, các bạn tích hợp thư viện Bootstrap Image Hover vào website với dòng mã lệnh HTML như sau:

<link href="path/to/effects.min.css" rel="stylesheet">

Bây giờ, các bạn sử dụng thư viện Bootstrap Image Hover kết hợp với Bootstrap để tạo hiệu ứng hover như ví dụ sau:

<div class="hover ehover1">
    <img src="path/to/image.jpg">
    <div class="overlay">Content</div>
</div>

Các bạn có thể tìm hiểu thêm về thư viện Bootstrap Image Hover tại địa chỉ https://miketricking.github.io/bootstrap-image-hover.