Collection - Add a hover effect to product images on your collection pages

[animusfilmco]

I have Brooklyn and this works perfectly, however on my search page I get a "Liquid error: Unkown operator blank" message where every photo should be and every items says "Sold out". If I try and add == instead of = to certain places in product-grid-item.liquid it will get rid of the "sold out" issue on the search page but then creates other issues on normal collection pages. Anyone had this issue?

Thanks in advance!

[Twooogirlsco]

Hi, 

I have done all the mentioned steps but the images on my shop still do not change with the hover effect. At most the images have a slight opacity overlay but they do not change to the other custom image.

Please help!

[Ashaan]

Thank you very much @HeyShopr . This worked for me using the Debut theme. 

 

[JaimeRosales]

Hi @animusfilmco I have a similar issue when trying to Search (see attached) were you able to solve this? Any help or pointer is appreciated. I'm also using Brooklyn. 

Thanks!

[JaimeRosales]

Ok I found my solution to the error mentioned above. 

I'm using Brooklyn. 

Here is the before. there is no space between 'featured_image.src' and  '==' in both mentions of the code below. 

<a class="grid-product__image-link{% unless featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url | within: collection }}" data-image-link>
	   <div class="reveal">
           {% if featured_image.src== blank %}

This is the working solution. 

<a class="grid-product__image-link{% unless featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url | within: collection }}" data-image-link>
	   <div class="reveal">
        {% if featured_image.src== blank %}

EDIT: Ok so it seems this website (The Forum) when I add the space on the 2 locations where it needs to be added it returns to to be without the space, I have seen other solutions like that so that could be the reason why I was not able to find it before. 

Just add the spaces and you will be good to go. Cheers!

[Pun]

Hello gurus,

may i know why my hover image is not centralised?

.reveal {
  position: absolute;
  top: 0;
  margin-left:auto;
  margin-right:auto;
  width: 100%;
  height: 100%;
}

.reveal .hidden {
  position: absolute;
  z-index: -1;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-height: 345px;
  opacity: 0;
  -webkit-transition: opacity 0.15s ease-in-out;
  -moz-transition: opacity 0.15s ease-in-out;
  -o-transition: opacity 0.15s ease-in-out;
  transition: opacity 0.15s ease-in-out;
}

[FXCHROMA]

Hi I am stuck trying to get this to work for the Venture theme. Do you have a workaround? I would like to use the effect on my feature products on the homepage. Many thanks.

[Elizabeth01]

I'm not sure if it will work for Venture theme but this video worked well for me on Debut https://www.youtube.com/watch?v=9uxSrOxxZpY maybe you can try it

[FXCHROMA]

Thanks Elizabeth it worked to a certain extent but it wouldn't show the price and description

[Elizabeth01]

Mmm...so you want to show your price and description on hover too? You can
look for an app on the Shopify App store for preview, and when you click on
the preview link people will see the price, description, pictures, etc, and
the more information link to go to the product page. There are some free
apps just make sure it works well on desktop and mobile. So you complement
this hover option with the preview for more info.

I hope it helps