Đ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
geodirectory affiliatewp integration
Chưa phân loại
wp rich snippets box shortcode
Chưa phân loại
all in one addons for wpbakery page builder formerly visual composer
Tính năng bán hàng
Tăng doanh số bán hàng với Woocommerce Sale Flash Pro
Chưa phân loại
css igniter specialty wordpress theme
Chưa phân loại
bim architecture interior design elementor wordpress theme
Chưa phân loại
sensei media attachments
Chưa phân loại
homey booking and rentals wordpress theme