Hi @EBOOST , thank you for your sharing
My website is https://www.snaptips.shop/ with the theme broadcast 5.1.3.
I’m try to show the second image (or more) of our products without click into the product.
It works on website, but not working on moblie. Could you take a look please?
Thank you very much!
Hi,
May I suggest to update code these steps:
body main .double__image .product-item__bg__under,
body main .product-item--overlay-text .product-item__bg__under {
opacity: 0;
display: block!important;
visibility: visible!important;
}
body main .double__image:hover .product-item__bg__under,
body main .product-item--overlay-text:hover .product-item__bg__under {
opacity: 1;
display: block!important;
visibility: visible!important;
}
It works. thanks a lot!
hi , i use dawn 12.0.0 and i used this code and second image appears after long press , i want it to change automatically after certain time (ex:2 or 3 sec), can you help me with it . My store -https://ogsensei.com/
Hello.
I am using dawn.
I added the above code in Assets/component-card.css
It partly worked. You need to push the image little bit hardly not just hovering so that you can see the second image.
Can you please help.
Thank you
Hello @EBOOST
I am having the same issue.
The hover effect worked perfectly on desk top, but partially on mobile.
My theme is Dawn 12.0.0.
Can you please support.
Thank you
Hi,
May I suggest to update code these steps:
Assets/base.css
Add code below to end of file
body .card-wrapper:hover .media.media--hover-effect>img+img {
opacity: 1;
transition: transform var(--duration-long) ease;
transform: scale(1.03);
}
body .card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
opacity: 0;
}
Hello. Thank you.
Unfortunately, it is still the same status: I need to push hard on the first
picture to see the second picture, and most of the time, it opens the item
page instead of just seeing the second picture.
Can you please support.
Thank you
Hi,
If you don’t want touch on image to redirect to PDP after that you can use code below to replace the code above that I suggested.
body .card-wrapper:hover .media.media--hover-effect>img+img {
opacity: 1;
transition: transform var(--duration-long) ease;
transform: scale(1.03);
}
body .card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
opacity: 0;
}
@media(max-width: 749px){
.card--standard > .card__content .card__information {
position: relative;
}
.card--standard .card__inner .card__media + .card__content {
display: none;
}
}
Thank you so much. We are almost there. The new coding respond to 90% of
what I was looking for.
In fact, with the new coding, I need to press on the image slightly to see
the second image. Whereas, on other web site, you just need to touch the
picture to have the second image to appear.
Can you please check the below site on your mobile so you can understand
exactly what I mean:
Once again, thank you for all your support.
Best Regards,
Hani
Hi,
With your theme. You can add more code below
@media(max-width: 749px){
.productitem--image-link {
pointer-events: none;
}
}
Hi, EBOOST!
Thanks in advance for helping out and all your coding knowledge 
I have the Dawn theme and was able to set up the hover function on the mobile version, but in order for the photos to show, I need to touch and slide each one of them. Could you please help me make the second photos display automatically as I scroll up/down?
Thanks a lot!
Yamila
Hi,
Do you mean you would like to slide images auto after about time?
Hi!
What I mean is that now, if I scroll down, nothing happens unless I touch the card images. And if I touch them briefly, the product landing page will open up. In order for the second photos to show on the product card, I need to touch and hold/slide for a moment, and someone who’s not aware of that function won’t be able to see them.
I’d like for the second photos to automatically show as I scroll down (not sure if that’s what you meant). Is that possible to set up?
Thanks a lot again!
Hi,
May you try to code below for Dawn theme:
body .card-wrapper .media.media--hover-effect:hover>img+img,
body .card-wrapper:focus .media.media--hover-effect>img+img,
body .card-wrapper:hover .media.media--hover-effect>img+img {
opacity: 1;
transition: transform var(--duration-long) ease;
transform: scale(1.03);
}
body .card-wrapper .media.media--hover-effect:hover>img:first-child:not(:only-child),
body .card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
opacity: 0;
}
@media(max-width: 749px){
.card--standard > .card__content .card__information {
position: relative;
}
.card--standard .card__inner .card__media + .card__content {
display: none;
}
}
Hi again!
Thanks a lot for the option, but we tried it and it still works the same way than before. The second photos don’t show up unless we tap and slide on each one of them.
If there’s anything else we can try, we’d be absolutely thankful. Our website is laregueira.shop
Thanks again for everything!
Hi,
Did you add code above to your theme? I checked your site but I didn’t see any code that has been added.
I checked this file. https://laregueira.shop/cdn/shop/t/14/assets/base.css?v=117828829876360325261702319193
Hi EBOOST, I’ve been looking for the answer to this everywhere. Could you please help me out? I am using the Pipeline theme and our url is shop.jackknifemotors.com
Hello,
I need again your help.
When the client click on the picture, he can see the second picture.
However, if he wants to buy it, it does work if he clicks on the picture
again. He needs to click the price or description. He can we fix that
please.
Once again, this is on the mobile only. On the desk top,we are not facing
such issue.
Thank you in advance,
Hani
