Greyscale product photos - colorize on hover?

Store Design
, , ,
1

My website: 774a7e.myshopify.com

password: meulti

I want to make all of my products appear greyscale. But when I hover over a product card, I want the photo to become colorized. I’m using Dawn.

Is there a way to do this? Thanks!

2

That shouldn’t be complex – add this at the very bottom of your component-card.css asset:

.card__inner {
    filter: grayscale(1);
    transition: filter 0.3s ease-in-out;
}

.card-wrapper:hover .card__inner {
    filter: none;
}
1 Like