Đoạn mã CSS giúp hình ảnh có hiệu ứng ánh sáng khi di chuột hover vào hình ảnh
.box-image:hover::before, .post-item:hover .box-image::before , .img:hover .img-inner::before{
-webkit-animation:shine .75s;animation:shine .75s
}
@-webkit-keyframes shine{
100%{left:125%}
}
@keyframes shine{
100%{left:125%}
}
.box-image::before, .img .img-inner::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)
}
.product-small.box:after, .mh-col-shadow > .col-inner:after, .post-item > .col-inner:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 100%;
transform-origin: right;
transition: transform .5s ease-in-out;
transform: scaleX(0);
}
.product-small.box:after, .mh-col-shadow > .col-inner:after, .post-item > .col-inner:after {
background: var(--primary-color);
}
.product-small.box:hover:after , .mh-col-shadow:hover > .col-inner:after, .post-item:hover > .col-inner:after {
transform-origin: left;
transform: scaleX(1);
}
Nếu bạn có bất kỳ thông tin hay trao đổi gì cần góp ý chia sẻ, vui lòng để lại bình luận chúng tôi rất hoan nghênh và sẵn sàng tiếp thu ý kiến.
Cảm ơn các bạn đã quan tâm theo dõi
Chưa phân loại
learndash lms samcart integration
Chưa phân loại
wpdiscuz syntax highlighter
Chưa phân loại
themify builder masked image
Chưa phân loại
woocommerce catalog visibility options
Chưa phân loại
wp rocket by wp media
Chưa phân loại
astra premium sites plugin
Chưa phân loại
userpro media manager add on
Tính năng bán hàng
Tính năng theo dõi đơn hàng với Woocommerce Shipping Tracking