Thêm hiệu ứng ánh sáng khi hover ảnh sản phẩm, banner bằng CSS WordPress

Thêm hiệu ứng ánh sáng khi hover vào hình ảnh banner hay hình ảnh sản phẩm có thể giúp website WordPress của bạn trở nên chuyên nghiệp và thu hút hơn. Chính vì vậy, trong bài viết này, mình sẽ hướng dẫn bạn cách sử dụng code CSS để thêm hiệu ứng ánh sáng khi hover vào ảnh banner hoặc ảnh sản phẩm trong website WordPress nhé. Bạn cũng có thể hover vào ảnh banner quảng cáo ngay bên dưới để xem demo hiệu ứng ánh sáng nha.

Cách thêm hiệu ứng ánh sáng khi hover ảnh sản phẩm

Nếu bạn đang sử dụng plugin WooCommerce cho website WordPress và muốn thêm hiệu ứng ánh sáng khi hover vào ảnh sản phẩm, bạn chỉ cần copy đoạn CSS bên dưới chèn vào website là xong.

.product-small .box-image:hover::before {
-webkit-animation: 0.75s shine;
animation: 0.75s shine;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}
.product-small .box-image::before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: "";
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.3) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}

Xem thêm: Cách chèn code CSS vào website WordPress

⚠️ Lưu ý: Tất cả các website WordPress sử dụng WooCommerce đều có class chung là .product-small .box-image. Vì vậy, bạn chỉ cần copy y nguyên đoạn CSS bên trên chèn vào web là xong.

Cách thêm hiệu ứng ánh sáng khi hover ảnh banner

Bên cạnh việc thêm hiệu ứng khi hover ảnh sản phẩm, các ảnh banner trên website cũng đóng một vai trò quan trọng. Và nếu bạn cũng muốn thêm hiệu ứng ánh sáng đẹp như vậy cho các banner trên website của mình thì cũng hoàn toàn có thể thực hiện được chỉ với một thay đổi nhỏ.

Để làm được điều này, bạn chỉ cần tìm đúng class của banner ảnh mà bạn muốn thêm hiệu ứng khi hover, sau đó sử dụng lại đoạn code cũ ở bên trên và đừng quên thay phần class .product-small .box-image trong code đúng với class của banner ảnh bạn nhé.

Nếu gặp khó khăn trong quá trình thêm CSS hoặc có bất kỳ thắc mắc nào thì hãy để lại bình luận ngay bên dưới để mình hỗ trợ bạn nhé. Chúc các bạn thành công!