Đ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
woocommerce payment gateway based fees
Chưa phân loại
brizy pro
Chưa phân loại
gravity perks gravity forms nested forms
Chưa phân loại
ninja forms twilio sms
Chưa phân loại
searchwp meta box integration
Chưa phân loại
themify minblr wordpress theme
Chưa phân loại
envira gallery lightroom addon
Chưa phân loại
phoenix wordpress minimal multipurpose portfolio with visual composer