1

Bom dia...

Preciso de uma ajuda e não sei como fazer. Tenho um ecommerce. Na página incial meus produtos aparecem assim: inserir a descrição da imagem aqui

Quero, que, assim que o cliente passar o mouse sobre as cores, mude a cor da camiseta.

Como fazer: Por onde começo.

PS. Loja em PHP.

4
  • 1
    Tem o código do elemento? Vc tem acesso ao HTML e CSS para customizar as coisas? As bolinhas pode estar na parte de cima?
    – hugocsl
    Commented 26/04/2019 às 11:49
  • posso customizar tudo... Commented 26/04/2019 às 11:54
  • Quer um tutorial ou uma ajuda :D Commented 26/04/2019 às 11:55
  • Não ajuda muito você nos pedir algo e nem sequer exibir o código aonde você está tentando fazer com que isso aconteça
    – HQSantos
    Commented 26/04/2019 às 12:02

1 Resposta 1

2

Esse é um modelo básico usando o seletor irmão ~ e filter para trocar a cor da imagem. Porém as bolinhas tem que vir antes da imagem para ficar legal. Para as bolinhas ficarem na parte de baixo e mesmo assim o seletor ~ funcionar como o esperado eu usei rotate() e flex jada ajustar.

Veja o código para entender melhor

.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>

2
  • boa.... e se os produtos viessem de uma base de dados? Commented 26/04/2019 às 12:27
  • 1
    @BetinhoSilva não sei, não foi isso que vc perguntou... Para essa pergunta eu tenho essa resposta... Se vc precisa de algo de banco sugiro fazer outra pergunta explicando o que precisa para alguém que entenda dessa área de ajude
    – hugocsl
    Commented 26/04/2019 às 12:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .