Show different product variant based on hovering over the related colour swatch

Hi all!

Currently building a single product page site (not e-commerce based as of yet but with similar layout and content, just no need to be transactional) and wondering how to go about showing the product’s colour variants with interactions. The product itself has 20-30 different colour options and therefore 20-30 different images.

I want to have a basic 2 column layout, image on left, product content (including the 20-30 colour swatches) on the right. Then when a user hovers over one of the colour swatches, the product image changes to that respective colour.

I have gotten this to work successfully through stacking 4-5 different product image variants then showing and hiding each based on hover/clicking that swatch, the only issue is that it’s difficult to scale since I need to create individual interactions for each image/swatch combo. Any more simple way to create this without dozens of individual show/hide animations?

Any help would be greatly appreciated!