Thêm hiệu ứng ánh sáng khi chỉ vào hình ảnh sản phẩm

5/5 - (1132 bình chọn)

thêm hiệu ứng ánh sáng cho sản phẩm website

Chào các bạn hôm nay mình sẽ hướng dẫn các bạn cách thêm hiệu ứng ánh sáng khi các bạn chỉ chuột vào ảnh trong sản phẩm của website nhé.

Các bạn coppy đoạn code dưới đây vào phần custom Css hoặc trong mục style.css nhé

Theo đường dẫn: Giao diện > Tùy biến > Style > Custom CSS

.product-small .box-image:hover::before{
-webkit-animation:shine .75s;animation:shine .75s
}
@-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,.3) 100%);
background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
-webkit-transform:skewX(-25deg);transform:skewX(-25deg)
}

Vậy là Alowebtot đã hướng dẫn cách thêm hiệu ứng khi chỉ chuột vào ảnh sản phẩm của website wordpress. Chúc các bạn thành công.

Xem thêm: