Reveal second image on hover - Debut theme

[iamcurious]

Hi, would really appreciate some help with this – been trying to follow some threads on this topic but to no avail.

I would like to have the second image of each product revealed on hover. Am using Debut theme.

Thanks very much!

My site is www.curiouslah.com

[GMco]

Thank you so much! I will be in touch soon.

[KetanKumar]

@GMco 

Thanks for your responose 

[Chero]

hi, @iamcurious,

how did you manage to avoid double images on phone screen?

brave-tribe.de

ps: waskow

[Effyl01]

hi @KetanKumar 

My debudt theme is 17.7 how come i cant find any css.liquid file?

I also want to try this hover effect.

Effy.

[KetanKumar]

@Effyl01 

it can be done some custom code

[Effyl01]

Hi,

Actually what I was look for and came across this article is to stop the behavior in the shopping cart page, when a user 1 product with the quantity button showing 1, if he will change it to zero it will automatically delete the item from the cart, no warrning.

Any idea how this case be changed?

Thanks!

[KetanKumar]

@Effyl01 

if possible to share video further issue

[NicolasMaverde]

Hi KetanKumar,

is it also possible to put a hover effect on normal images?

I Think about the section image-bar.

Here you can find an example of what I am thinking about: https://dribbble.com/shots/5551370-Portfolio-concept 

Thank You

Nicolas

[KetanKumar]

@NicolasMaverde 

Yes, but it's not working all browser and mobile design 

[NicolasMaverde]

Could you send me a code so I can try?

Would be great!

Thank you!

[KetanKumar]

@NicolasMaverde 

Thanks for it 

can you try and modification this  code

https://codepen.io/theadameden/pen/ReypqN

https://codepen.io/Alexee/pen/NXgYmN

[Bram1987]

@iamcurious @KetanKumar 

Thanks a lot, this finally worked for me after trying many times before with different solutions and failing. 

However, the only problem I have is that the hover seems to always show the LAST picture in the gallery whereas I would prefer it to be the second picture. Is there any solution for this?

Thanks a lot, again

Website: www.umacantik.com 

[KetanKumar]

@Bram1987 

YES, IS POSSIBLE TO CUSTOM CODE

[jordae]

Hello all,

Is this still working ?

I'm on Debut theme (v 17.12.0) the image change works on mouse hover but when I paste the code from this post in my product-card-grid.liquid it displays this "no image" instead of my products first photo

 

[KetanKumar]

@jordae 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Daniel134]

Hi can you help with where this specifcially goes into the product.liquid.grid file for debut theme. 

I have added the css, but after a few tries in that product grid template, I cannot get anything to appear. 

[KetanKumar]

@Daniel134 

sorry for any issue 

please share store url and issue images 

[Daniel134]

The store url is shopshelovesme.com 

There is no longer any code in the product-grid file as I could not get it working. Only the css remains in the css file 

[KetanKumar]

@Daniel134 

thanks for detail 

do you have like this

https://community.shopify.com/c/Shopify-Design/Collection-Add-a-hover-effect-to-product-images-on-yo...

[Daniel134]

Yes, I have been following the instructions, but product-grid file is not exactly as it is stated above. Please see product grid file for SRC spot. How would I place this code here to show second image on hover. I believe I have CSS correct, but we can check after this step if it still does not show. 

I was trying to place it here in the file named: product-card-grid.liquid 

<div class="product-card__image-with-placeholder-wrapper" data-image-loading-animation>
<div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
<div style="padding-top:{% unless preview_image == blank %}{{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
<img id="{{ img_id }}"
class="grid-view-item__image lazyload"
alt="{{ preview_image.alt }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ preview_image.aspect_ratio }}"
data-sizes="auto"
data-image>
</div>
</div>
</div>