Hover effect for product image to show the second image

Highlighted
New Member
3 0 0

Hey Hugh,

I have a quick view app running along with the hover 2nd image effect. However, when I hover over the product tile, the 2nd image covers the quick view button. Any way to have the quick view button stay over the 2nd image when I hover?

 

Thanks.

0 Likes
Highlighted
New Member
2 0 0

I have this set up to display the 2nd image on hover, but most of my products have several images -- different colors, etc. Is it possible to scroll through the different images on hover?

0 Likes
Highlighted
New Member
4 0 0

I am having trouble getting the hover stuff to work from the directions. https://help.shopify.com/themes/customization/collections/add-hover-effect-to-product-images#reveal-... 

 

Could anyone help me as the code example is diff then the template. I would be forever greatful!

 

 </div>
          <noscript>
            <div class="reveal">
            <img class="grid-product__image" src="{{ product.featured_image.src | img_url: '1024x' }}" alt="{{ product.featured_image.alt | escape }}">
          <img class="hidden" src="{{ product.images.last | img_url: 'large' }}" alt="{{ product.images.last.alt | escape }}" />
            </div>
              </noscript>
        {% endif %}

0 Likes
Highlighted
Excursionist
38 0 6

probleme solved

 

pierre

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

Salut Pierre, 

Pourrais-tu m'aider à installer le hover, j'ai bien tenté, mais rien n'y fait. Si tu peux juste me montrer l'emplacement du code. j'ai bien suivi le tuto mais cela ne fonctionne pas.

Merci de ton aide.

A bientôt j'espere

p.s : je te joins là où j'ai installé mon code

Patrice

0 Likes
Highlighted
New Member
2 0 1

Did you ever get this to work? I'm having the same problem! Thanks. 

0 Likes
Highlighted
Tourist
7 0 2

While following the offical guide (https://help.shopify.com/themes/customization/collections/add-hover-effect-to-product-images) there are some additions also which Shopify guru resolved for me. This works for Minimal and Brooklyn theme as well.

Check the image and see the changes.

Don't forget to add the class reveal in line 45 ;)

0 Likes
Highlighted
New Member
2 0 0

I've followed the instructions, and it works great for the hoover over, however now the images are not clickable. Now the only way to get to the product page is to click on the title under the image. Is there a way to do this and still have the image as a link to the product page?

Thanks for any help on this. 

0 Likes
Highlighted
New Member
1 0 1

Dear Kala,

could you please copy and paste the code here?

I think you got the solution to my problem :)

Thanks in advance.

1 Like
Highlighted
Excursionist
28 0 4

Hey everyone,

I've also tried using this tutorial https://help.shopify.com/themes/customization/collections/add-hover-effect-to-product-images#reveal-... on how to create an alternate image on hover, however I don't think it works for the Brooklyn theme anymore.

Has anyone got it to work recently?

I'd love to hear your thoughts.

Cheers,

Fatima

asanovski.myshopify.com
(pw yahvee)

0 Likes