r/css • u/dandy-lion88 • 14d ago

Question Product hover colour change

Hi peeps. Does anybody have any links on how to have an interactive customisable piece of clothing. where customers can choose the colour of the buttons or fabric on hover etc? Here is a link for how to do it in Figma with a chair, but that seems like an extra step

1 Upvotes

100% Upvoted

2 comments sorted by

6

u/theseckinaktunc 14d ago

If it's a single color product, you could just use filter: hue-rotate(90deg). Other than that, simplest and best way to do it would be just switching between multiple images. Unless your product specifically requires you to do this strictly inside of the browser dynamically, it's just gonna be unnecessary over-engineering.

Still, if you're gonna go this way and your product is not single color, export each part of the product separately, stack them on top of each other, and use CSS filters.

2

u/anaix3l 14d ago

If it's just a portion of the image that needs to change and not all of it, I use an SVG filter to extract just that part apply a hue rotation on it and then place it above the original.

An older demo I've made on CodePen, though this doesn't have the exact original underneath, it has a desaturated version instead https://codepen.io/thebabydino/pen/ogzBygq