Cambiar imagen de vitrina en hover

pablo.gardiazabal · May 17, 2018, 6:01pm

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!

nathan · May 17, 2018, 8:55pm

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.

guilhermeviana609 · November 7, 2018, 11:32am

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.

nathan · November 7, 2018, 11:47am

O terceiro parâmetro é o campo LABEL que você cadastrou na imagem vinculada nos skus.

guilhermeviana609 · November 7, 2018, 11:50am

Blz, muito obrigado!

Italo_bezerra · September 28, 2021, 3:09pm

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