Cambiar imagen de vitrina en hover

Buenos dias!

He visto en muchas tiendas que al hacer hover sobre la vitrina modifican la imagen del producto por otra vista. Queria saber si alguno podria guiarme o ayudarme a comprender como realizarlo en vtex.

Muchas gracias!

Existem v√°rias formas de realizar isso. A mais simples na minha opini√£o seria dessa forma:

<span class="hover-image"> $product.GetImageTag(520,520,"labelName") </span>

Com o css você poderiai esconder a imagem principal e apresentar a outra.

Nathan, o terceiro par√Ęmetro seria o que exatamente?

<a class="productImage" title="$escapedName" href="$uri"> <div class="principal">$product.GetImageTag(255, 255)</div> <div class="hover">$product.GetImageTag(255, 255, "hover")</div> </a>

A segunda img n√£o √© carregada (meu c√≥digo acima), creio que o problema √© o terceiro par√Ęmetro.

1 Like

O terceiro par√Ęmetro √© o campo LABEL que voc√™ cadastrou na imagem vinculada nos skus.

Blz, muito obrigado!

Como você fez para colocar isso no css?
Eu já tentei de varias formas e a imagem só fica uma embaixo da outra!