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

Tourist
10 0 2

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!

Excursionist
11 0 5

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!

0 Likes
New Member
2 0 0

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

 

0 Likes
Tourist
6 0 0

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!Screen Shot 2020-12-28 at 7.08.11 PM.png

0 Likes
Tourist
6 0 0

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!

0 Likes
New Member
1 0 0

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;
}

Screenshot 2021-01-04 at 11.42.55 AM.png

0 Likes
New Member
3 0 0

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.

0 Likes
New Member
2 0 0

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

0 Likes
New Member
3 0 0

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

 

0 Likes
New Member
2 0 0
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
0 Likes