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]

Hello, 

Welcome to the Shopify community!
and Thanks for your Good question. 

https://community.shopify.com/c/Shopify-Design/Collection-Add-a-hover-effect-to-product-images-on-yo...

[iamcurious]

Hi, thanks for the link - I tried following some of the suggestions there but it didn't work.

Then I used this: https://www.youtube.com/watch?v=9uxSrOxxZpY which did work, but now there are some issues..

Code used for Reveal Module in theme.scss.liquid :

/* ===============================================
// Reveal module
// =============================================== */
.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;
}
}

Code used in 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>

The issues are: (see www.curiouslah.com home page for reference)

1) No padding/spacing between the product images and product titles, that was with the original code

2) For products with a vendor, the vendor name is shown twice

Any ideas how to fix this? Thank you!

[KetanKumar]

@iamcurious 

Thanks for store details 

sorry but I can see this code do you have added?

[iamcurious]

@KetanKumar 

Sorry, I changed it back to the original code again just now.

Have switched the code to the one mentioned above, so you can see the issues with the padding and vendor title.

Thanks!

[KetanKumar · Accepted solution]

@iamcurious 

Thanks for update code 

also, please add the below code.

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

.grid-view-item__title {
margin-top: 20px;
}
.grid-view-item__vendor, .price__vendor {
    display: none;
}

[iamcurious]

Thank you very much! This worked!

[KetanKumar]

@iamcurious 

Thanks for update and your compliment.

[Twooogirlsco]

Hi, what do I do if I want to reveal the second image as well but I do not have a theme.scss.liquid?

I can only see theme.css.liquid or theme.scss

Thank you!

[KetanKumar]

@Twooogirlsco 

Thanks 

can you please try this

https://community.shopify.com/c/Shopify-Design/Collection-Add-a-hover-effect-to-product-images-on-yo...

[Twooogirlsco]

Sure, thank you!

[Twooogirlsco]

Hi Ketan Kumar,

I tried the link and the steps do not work for me... is there a reason why

[KetanKumar]

HEllo, @Twooogirlsco 

It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me

[Twooogirlsco]

noted. how much do you charge for this hover?

[KetanKumar]

i have send PM

[Chero]

Hi @iamcurious  nice to know it works on your website.

however, how did you manage to get it work for all the rows?

[GMco]

Hi! I am also using the Debut theme and would like to have the second image revealed on hover. Is it possible to have the full code displayed and exactly where to add it? Thank you so much!

[KetanKumar]

@GMco 

Thanks for post 

yes can you please flow this step

https://community.shopify.com/c/Shopify-Design/Collection-Add-a-hover-effect-to-product-images-on-yo...

[GMco]

Thank you for your quick reply. However, I followed the directions step by step and it is not working for me. Not sure what I did wrong. Any other advice?

[KetanKumar]

@GMco 

Thanks for it

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like