CSS Đổi Màu ảnh Khi Hover Vào Logo

Bạn có thể làm được hiệu ứng trong đó hình ảnh ban đầu xuất hiện là màu xám và hiển thị màu gốc khi được di chuột hover vào bằng thuộc tính filter CSS. Đây là cách bạn có thể làm điều đó:

CSS Đổi màu ảnh khi hover vào Logo

CSS

.subcategory-item a {

filter: gray;

-webkit-filter: grayscale(1);

filter: grayscale(1);

transition: filter 0.3s ease;

}

.subcategory-item:hover a {

-webkit-filter: grayscale(0);

filter: none;

}

HTML

</a>

</li>

</ul>

Giải thích

filter: grayscale(1): Chuyển đổi hình ảnh sang thang độ xám.
filter: grayscale(0): Khôi phục lại màu sắc ban đầu.
transition: filter 0.3s ease: Thêm hiệu ứng chuyển tiếp mượt mà khi di chuột qua hình ảnh.