Change product color Mouseover

Question

Good morning...

I need a help and do not know how to do. I have an Ecommerce. On the initial page my products appear like this:

I want, that as soon as the customer passes the mouse over the colors, change the color of the t-shirt.

How-to: Where do I start.

PS. Store in PHP.

Answer 1

This is a basic model using the brother selector ~ and filter to change the color of the image. But the balls have to come before the image to be cool. For the balls to be on the bottom and still the dial ~ work as expected I used rotate() and flex Jada adjust.

See the code to better understand

.box {
    display: flex;
    justify-content: center;
    width: 300px;
    border: 1px solid #000;
    flex-wrap: wrap;
    transform: rotate(180deg);
    flex-direction: row-reverse;
}
.cor {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 10px;
    background-color: red;
    cursor: pointer;
}
.cor:hover {
    transform: scale(1.2);
}
.red:hover ~ img {
    filter: grayscale(100%) sepia(100%) hue-rotate(-60deg) saturate(8);
}
.blue {
    background-color: blue;
}
.blue:hover ~ img {
    filter: grayscale(100%) sepia(100%) hue-rotate(200deg) saturate(8);
}
.green {
    background-color: green;
}
.green:hover ~ img {
    filter: grayscale(100%) sepia(100%) hue-rotate(90deg) saturate(8);
}
.box img {
    width: 45%;
    height: 45%;
    object-fit: contain;
    margin: 20px;
    transform: rotate(180deg);
}

<div class="box">
    <div class="cor red"></div>
    <div class="cor blue"></div>
    <div class="cor green"></div>
    <img src="https://placecage.com/100/100">
</div>