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

[masuimimax]

Got it working on Debut theme but when a product only has one image it shows a white square with No-Image. How do I change that so it just shows the main image when a product only has one image?

[KetanKumar]

@masuimimax 

yes please show me issue images

[masuimimax]

Hi, try "Liger Lady" https://iamdeadly.com/collections/view-all

[KetanKumar]

@masuimimax 

i have check its working fine doesn't issue

[Godzhand]

Having problem with stacked image on mobile only. I manage to make it work on desktop/laptop version but for mobile it has stacked images.

Store url: godzhand.myshopify.com

theme.css:

.has-secondary.grid-view-item__link img.secondary{
 display:none;
}

.has-secondary.grid-view-item__link:hover img.secondary{
 display:block;
}

.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
 display:none;
}

@media screen and (min-width:767px){
.has-secondary.grid-view-item__link img.secondary{
 display:none;
}

.has-secondary.grid-view-item__link:hover img.secondary{
 display:block;
}

.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
 display:none;
}
}

@media screen and (max-width:767px){
.has-secondary.grid-view-item__link img.secondary{
 display:none;
}
}

product-card-grid.liquid:

{% unless grid_image_width %}
  {%- assign grid_image_width = '600x600' -%}
{% endunless %}
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link {% if product.images.size > 1 %} has-secondary{% endif %}" href="{{ product.url | within: collection }}">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}">
    {% if product.images.size > 1 %}
     <img class="secondary" src="{{ product.images.last | img_url: grid_image_width }}" alt="{{ product.images.last.alt | escape }}">
    {% endif %}
    <div class="h4 grid-view-item__title">{{ product.title }}</div>
    {% if section.settings.show_vendor %}
      <div class="grid-view-item__vendor">{{ product.vendor }}</div>
    {% endif %}
    <div class="grid-view-item__meta">
      {% include 'product-price', variant: product %}
    </div>
  </a>
</div>

[KetanKumar]

@Godzhand 

sorry for that issue but on mobile device doesn't work hover its was convert to hover to touch event 

[Godzhand]

okay, but at the very least can you help me so it does not show 2 stacked images on mobile? So it just go back to the default one.

[KetanKumar]

@Godzhand 

can you please show me issue so i will check and guide 

[Godzhand]

Hi,

So basically on desktop/laptop version it works fine, but when it's on mobile, it will look like this.

How can I make it to be able to just be 1 picture without hover/default, but if you can make it to hover too that would be awesome.

[BeresMedia]

@KetanKumar Can you please help me? When on my products on mobile, the menu bar is disabled and the logo in the header has a weird box around it - can you please take a look? www.ballooncouture.com.au (from your phone)

[EllaFS]

Hi Ketan, 

Tried adding this code but the hover didn't work.

We'd like it so that if you hover on the first image, it shows the second image please. Can we have it on the homepage products but also on each product page itself too?

Thanks,

Ella

[nicky11]

Hey Ketan, I somehow managed to make it work with the previous mentioned steps from this post however I have one little problem. My images are literally doubled. 
Can you give it a look and tell me how can I remove non-rotatable pictures of my products? 

Here's the photo to better understand what I am asking for.

https://hustlebabe-shop.myshopify.com/    - password:009900

[KetanKumar]

@nicky11 

this only singale image 

[nicky11]

The upper row that I've marked, I want to remove it and have only rotatable product images to stay.

[KetanKumar]

@nicky11 

yes, please add this code

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

@media screen and (min-width: 767px) {
.has-secondary.grid-view-item__link:hover img.secondary {display: none;}
.has-secondary.grid-view-item__link:hover img.grid-view-item__image {display: block;}
}

[nicky11]

This didn't help at all. I assume you didn't understand what I'm trying to achieve. There are duplicated pictures at the moment, right? One is static and the other is rotatable (hover over display second image), right? I want to remove all static product images and have ONLY rotatable ones displayed.

[KetanKumar]

@nicky11 

yes but what about a single image? at that time show only one

[nicky11]

None of the products are single image, they are just displayed like that on site therefore I want to remove them and leave only double images.

[nicky11]

https://hustlebabe-shop.myshopify.com/collections/woman - 009900

Go to this link. The images I have crossed, I want to remove because they DON'T rotate. The others that rotate, I want to keep them. Can I achieve that somehow?

[nicky11]

I will create separate post and try to explain as best as I can what I am looking for. Thank you once again for your willingness to help !