Edit History

En 23/9/2020 a las 11:23 AM, TomSoiree dijo:

 

Correct me if I'm wrong but all this can be achieved by this short code in catalog/_partials/miniatures/product.tpl

{if isset($product.images[1])}
  <img
    src="{$product.images[1].bySize.home_default.url}"
    alt="{if !empty($product.images[1].legend)}{$product.images[1].legend}{else}{$product.name|truncate:30:'...'}{/if}"
    data-full-size-image-url="{$product.images[1].large.url}"
    class="image2"
   />
{/if}

CSS:

#products .products .thumbnail-container .product-thumbnail .image2{opacity:0;transition:all .5s cubic-bezier(.07,.74,.56,.89)}
  #products .products .thumbnail-container:hover .product-thumbnail .image2{opacity:1}

 

Hola! cómo podría usar este código en Prestashop 1.7.7.3, para que el HOVER se realice encima de la misma imagen,

He intentado muchas formas y el código funciona, pero no logro que el cambio css se realice dentro del contenedor de la imagen principal (para simular el efecto completo).

Actualmente tengo el código puesto en 2 IMG,, pero quiero que se vea sólo en 1 (para hacer el hover)

{block name='product_thumbnail'}
				<a href="{$product.url}" class="thumbnail product-thumbnail">
				{* AngarTheme *}
				{* {if !empty($product.cover.bySize.home_default.url)} *}
				
				
				{if isset($product.images[0])}
				  <img
					src="{$product.images[0].bySize.home_default.url}"
					alt="{if !empty($product.images[0].legend)}{$product.images[0].legend}{else}{$product.name|truncate:30:'...'}{/if}"
					data-full-size-image-url="{$product.images[0].large.url}"
					class="image1"
				   />
				   <img
					src="{$product.images[1].bySize.home_default.url}"
					alt="{if !empty($product.images[1].legend)}{$product.images[1].legend}{else}{$product.name|truncate:30:'...'}{/if}"
					data-full-size-image-url="{$product.images[1].large.url}"
					class="image2"
				   />
				   
				   
				   {* {/if} 
				  <img
					src = "{$product.cover.bySize.home_default.url}"
					alt = "{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
					data-full-size-image-url = "{$product.cover.large.url}" {if isset($product.cover.bySize.home_default)} width="{$product.cover.bySize.home_default.width}" height="{$product.cover.bySize.home_default.height}" {/if}
				  > *}
				  
				  
				  
				{else}
				  <img src = "{$urls.img_url}en-default-home_default.jpg" alt = "{$product.name|truncate:30:'...'}" >
				{/if}
				</a>
				{/block}

El CSS que añadi es similar pero probe con dos clases:

/* product*/
#products .products .thumbnail-container .product-thumbnail .image1{opacity:1;transition:all .5s cubic-bezier(.07,.74,.56,.89)}
  #products .products .thumbnail-container:hover .product-thumbnail .image1{opacity:0}
  
#products .products .thumbnail-container .product-thumbnail .image2{opacity:0;transition:all .5s cubic-bezier(.07,.74,.56,.89)}
  #products .products .thumbnail-container:hover .product-thumbnail .image2{opacity:1}
  /* END product*/

Uso Angar Theme (se ve en el código la linea)

Alguna forma de lograr el efecto justo en la imagen? 

Gracias! estoy a un paso con tu código de lograrlo, sigo intentando...