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

[KetanKumar]

@hefestus 

yes that current code please add this code 

[hefestus]

@KetanKumar Which one? There was no code in your answer

[hefestus]

@KetanKumar i accidentally clicked it as solved but its not. I didnt see any new code to add. Can you please let me know?

[KetanKumar]

@hefestus 

no sorry i can't see this code

<div class="reveal">
<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>
<img class="hidden" src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" />
</div>
</div>
</div>

</div>

[hefestus]

@KetanKumar  I dont understand, what do i do???

this is the code i put for product-card-grid.liquid
I dont see any corrected one or what to change.

<div class="reveal">
<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>
<img class="hidden" src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" />
</div>
</div>
</div>

</div>

[KetanKumar]

@hefestus 

sorry for that one i thinkkg someting is wrong if possible to add me staff and give just theme access so i will check and update code

[hefestus]

@KetanKumar Sure, no problem!

How do i add you, with this email: bamaniyaketan.sky@gmail.com ?

[KetanKumar]

@hefestus 

yes please 

[hefestus]

@KetanKumar i already did

[KetanKumar]

@hefestus 

thanks 

i have check this code its work as well but issue generate by this app Product Filter & Search app was replace theme code so doesn't work 

[BeresMedia]

Hello,

I've just tried so many different ways from YT tutorials and have just done your way and I'm still getting the images stacked on each other...

website link - p/w: couture123

I'm not sure if there is an app blocking the feature?

Please help, thank you

[BeresMedia]

All good I have resolved this issue now. Would love to know how to make my image on my landing page zoom when hovered. It is just a 'Text Columns with Images' image, not a product image. Would love some more interaction with it if possible please.

[KetanKumar]

@BeresMedia 

yes please show me issue 

[BeresMedia]

I popped my website details above if you want to have a look there or here is a screenshot - they are stagnent photos and I'd like to either have it zoom in when I hover over them (1st preference) or click on them to purchase and I can remove the buttons (that bit I know how to do haha)

[KetanKumar]

@BeresMedia 

yes please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.feature-row__image-wrapper .feature-row__image {
    transition: all 0.9s;
}
.feature-row__image-wrapper:hover .feature-row__image {
    transform: scale(1.1);
}

[BeresMedia]

Thank you so much, you're incredibly helpful.

I have one last question and then the site is done! 🙂 😉 I really appreciate your help.

My header logo is the same file/image on all pages, however on the product pages it comes up with a blurry background whereas the file is a transparent background. any  suggestions pls?

[KetanKumar]

@BeresMedia 

yes please share store url 

[cherryangel]

Hi @KetanKumar Can you please help me with my Debut theme looks like the three dots from the slider are all the way to the right I am not sure why. Also how can I make the slider button background transparent?

In advance thank you so much for your help!

[KetanKumar]

@cherryangel 

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.

[masuimimax]

Hello! I got this working well but is there a way to hide the second image when not hovering? I'm using an image with a transparent background as the first image and this shows what's underneath. Here is an example page https://iamdeadly.com/collections/i-am-sin