Đ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
zuperla creative multi purpose wordpress theme
Chưa phân loại
search manager plugin for woocommerce and wordpress
Chưa phân loại
woocommerce name your price
Chưa phân loại
give americloud payments
Chưa phân loại
woocommerce product table
Chưa phân loại
gravity perks gravity forms paypal one time fee
Chưa phân loại
affiliatewp affiliate forms for gravity forms
Chưa phân loại
gift wrapper for woocommerce