Access a community of over 900,000 Shopify Merchants and Partners and engage in meaningful conversations with your peers.
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
Solved! Go to the solution
yes that current code please add this code
@KetanKumar i accidentally clicked it as solved but its not. I didnt see any new code to add. Can you please let me know?
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>
@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>
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
@KetanKumar Sure, no problem!
How do i add you, with this email: bamaniyaketan.sky@gmail.com ?
yes please
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
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
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.
yes please show me issue
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)
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);
}
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?
yes please share store url
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!
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.
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
User | RANK |
---|---|
205 | |
111 | |
89 | |
56 | |
45 |