Hover effect for product image to show the second image

Highlighted
Tourist
4 0 2

Hello,

I'm using the free Brooklyn theme. I wanted to add a hover effect to my featured product on the home page and the 'all products' collections page. I implemented https://help.shopify.com/themes/customization/collections/add-hover-effect-to-product-images#reveal-... and its working as expected. However it only allows me to show the last image on hover. This means my second best image has to be last and that really doesn't do well for my products.

I want to change the hover effect to show the second image not the last. I tried changing 'last' to 'second' in the instructions titled 'Find the snippet that contains your product image' in that help page but this doesn't do what I want. It changes the hover effect to display 'no image' instead of the second image. Any ideas?

2 Likes
Highlighted
Shopify Staff
Shopify Staff
283 0 46

Hi Sangya,

We can adjust the code from the guide slightly to have it use the 2nd image in your product images instead of the last. The line of code we will change is this:

<img class="hidden" src="{{ product.images.last | product_img_url: 'large' }}" alt="{{ product.images.last.alt | escape }}" />

To this:

<img class="hidden" src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.images[1].alt | escape }}" />

See that the .last is replaced with a number in square brackets. The number in the bracket will determine which photo in which position to use. As a note, the positioning starts at 0, so using 1 would actually pull the 2nd photo.

This is further explained in the same guide you have used under the heading, If I reveal an image, can I reveal the second image of the product, or third, instead of the last?

I hope that helps!
Hugh

Happy selling! :)
0 Likes
Tourist
4 0 2

Hi Hugh,

Thanks so much, you rock! I don't know how I missed it on the page. You were super helpful! :)

Sangya

0 Likes
Highlighted
Excursionist
38 0 6

Hi,

 

the hoover is working fine for me , i'm also using brooklyn theme.

The problem (as their is always one at the first time...) is that the image that apear is stretch (see attached file)

Any idea about how to solved that is most welcom !

Pierre

www.tshartgallery.com
0 Likes
Highlighted
Tourist
4 0 2

Hi Pierre,

I noticed that on some of my imamges too so used only square images and in a normal grid instead of the alternating sizes.

0 Likes
Highlighted
Excursionist
38 0 6

San,

Thanks for you answer.

What do you mean by "normal grid" instead of "alternating size" ? Not sure to know what is this.

www.tshartgallery.com
0 Likes
Highlighted
Tourist
4 0 2

Sorry about the confusing wording. I mean I used the 'grid' setting instead of 'collage' on the collections customisation.

0 Likes
Highlighted
Excursionist
38 0 6

Ok Thanks, i realized after seeing your web site (vey nice and clean by the way).

I hope a Guru will swing by this topic becaue i'd like to keep the collage setting and i can't have square pic :-)

 

www.tshartgallery.com
0 Likes
Highlighted
Excursionist
38 0 6

Hi guys,

no idea how to solve that ?

P.

www.tshartgallery.com
0 Likes
Highlighted
Excursionist
38 0 6

Last try, any idea ?

 

how to get a hower effect with brooklyn them by keeping the collage grid and without having square photo :-)

www.tshartgallery.com
2 Likes