How to add hovering effect for products using a gif

[bytebazaar]

Hey,

I would like to add a hovering effect for my product images on my homepage and collection page.

I want a GIF to show up, while hovering on a product.

I am currently using the Dawn theme v. 12.0.0

My website is shopbytebazaar.com .

I don't know how to do that. Any help will be appreciated

Thanks in advance!

[Dan-From-Ryviu]

Hi @bytebazaar 

You can try to add this code at the bottom of your base.css file in Online store > Themes > Edit code

.card-wrapper:hover .card--media:after {
    content: url('your gif link goes here');
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

[bytebazaar]

Thanks for the answer,

but does this apply to all of my products? I've got multiple products and therefore want to match the products with their according GIFs.

[Dan-From-Ryviu]

Yes, it will apply to all products and use the same gif. 

[bytebazaar]

I see, but I don't want to use one GIF for every product. Every product has its own GIF. So for example if I hover on product 1 a GIF of product 1 should appear and if I hover on product 2 a GIF of product 2 should appear. I want different GIFs to show up.

[Dan-From-Ryviu]

You can do that by adding gif image is 2nd image of your products and then enable option "Show second image on hover" in your Online store > Themes > Customize > Collections > Default collections

[bytebazaar]

But this way one specific GIF is for every product?

[Dan-From-Ryviu]

Yes, it will. 

[bytebazaar]

But that is not what I want. I don't know how to explain sorry.

What I want is let's say I have 2 products on my page. 1st product is a t-shirt so I want a GIF of that T-Shirt to show up when you hover above the T-Shirt. The 2nd product is a hoodie, so I want a GIF of the Hoodie to show up. From what I understood if I would follow your advise there would be a GIF of a T-Shirt on both products, which would not make much sense. So I want sperate GIFs for seperate products. 🙂

[Dan-From-Ryviu · Accepted solution]

It will not app the same gif for both products, it will appear gif image belong to that product when hovering but you must go to each product, add gif image is 2nd image of products

[bytebazaar]

Oh I see my bad. Thank you very much!

[Dan-From-Ryviu]

You are very welcome