Reveal second image on hover - Debut theme

Solved
iamcurious
Excursionist
21 0 12

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

Replies 109 (109)
KetanKumar
Shopify Partner
32615 3276 10855

@hefestus 

yes that current code please add this code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
hefestus
Excursionist
10 0 6

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

hefestus
Excursionist
10 0 6

@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
Shopify Partner
32615 3276 10855

@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>
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
hefestus
Excursionist
10 0 6

@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
Shopify Partner
32615 3276 10855

@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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
hefestus
Excursionist
10 0 6

@KetanKumar Sure, no problem!

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

KetanKumar
Shopify Partner
32615 3276 10855

@hefestus 

yes please 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
hefestus
Excursionist
10 0 6
KetanKumar
Shopify Partner
32615 3276 10855

@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 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
BeresMedia
Tourist
7 0 3

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
Tourist
7 0 3

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
Shopify Partner
32615 3276 10855

@BeresMedia 

yes please show me issue 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
BeresMedia
Tourist
7 0 3

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)

 

Screen Shot 2021-11-02 at 9.51.43 am.png

KetanKumar
Shopify Partner
32615 3276 10855

@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);
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
BeresMedia
Tourist
7 0 3

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?Screen Shot 2021-11-04 at 3.58.49 am.pngScreen Shot 2021-11-04 at 3.58.36 am.png

KetanKumar
Shopify Partner
32615 3276 10855

@BeresMedia 

yes please share store url 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
cherryangel
New Member
2 0 1

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?

cherryangel_1-1635975520062.png

 

In advance thank you so much for your help!

 

KetanKumar
Shopify Partner
32615 3276 10855

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
masuimimax
Tourist
3 0 2

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