Đ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
overflow contemporary blog magazine wordpress theme
Chưa phân loại
give mollie payment gateway
Chưa phân loại
woocommerce instagram
Chưa phân loại
popup maker secure idle user logout
Chưa phân loại
mythemeshop beauty wordpress theme
Chưa phân loại
kindori school kindergarten wordpress theme
Chưa phân loại
gravity perks gravity forms email users
Chưa phân loại
woocommerce amazon s3 storage