contrast() | CSS-Tricks
▻https://css-tricks.com/almanac/functions/c/contrast
Making product card images pop on hover
Another useful application for contrast() is to highlight an image in a user’s interaction. For example, in a row of image cards, we could increase the image’s contrast and also scale it on hover
.card img {
transition:
filter 0.4s ease,
transform 0.4s ease;
}
.card:hover img {
filter: contrast(125%);
transform: scale(1.05);
}