Hướng dẫn thêm css cho ảnh trong product box và blog box đẹp

Bài này mình sẽ share cho mọi người 1 đoạn css ngắn để thêm hiệu ứng khi di chuột vào ảnh sản phẩm và ảnh bài viết nhé.

Đây là web mẫu có thể tham khảo: https://mombi.vn/

Các bạn copy đoạn css này vào file style.css nhé:

.box-image {
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.box-image::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);
}
.box-image:hover::before {
-webkit-animation: shine .75s;
animation: shine .75s;
}

.box-image:hover img {
-webkit-filter: contrast(125%);
filter: contrast(125%);
transition: .3s ease-in-out;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}