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]

@nicky11 

can you try this code

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

#shopify-section-collection-template .grid-view-item.product-card {
    display: none;
}

[nicky11]

Well done and big thank you! Solved my problem.

One more thing, how do I center the next now? I will attach the photo below so you can see what I a referring to.

[nicky11]

Also, referring to the issue you already helped me fix, how do I do the same for the photos on the Home Page, it's a featured collection and I want only rotating photos to show. Thanks in advance man !

[KetanKumar]

@nicky11 

oh sorry but i can't see your store now password protect and passwords page i can't see button 

[nicky11]

Oh sorry, I got it back for you 🙂   Check it out

[nicky11]

Can I expect any answer for this issue? Hopefully yes, I thank you in advance.

Also, new password for the site is messaged to you, check it out.

[KetanKumar]

@nicky11 

yes i have checked its work 

[camilaorozcom]

Hello, 

I can not find theme.scss.liquid, just theme.css how can I do it?

[KetanKumar]

@camilaorozcom 

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.

[camilaorozcom]

Hello, 

My website is www.susolesw.com 

[JessBo]

Hi There, I have the Debut Theme, where do I add this code to please I dont seem to have theme.scss.liquid or the alternatives mentioned on the other thread. Thanks 

[KetanKumar]

@JessBo 

can you please send store url 

@camilaorozcom 

i have check this customization On product hover or let me know DM

[JessBo]

Hi there

Yes it’s studiobhomeware.com

[KetanKumar]

@JessBo Thanks, If you're comfortable working with coding languages (eg. HTML, JavaScript, CSS, and Liquid), then you can try to follow the custom coding provided by or Send DM

Product hover 

[JessBo]

Hi There 

My website is www.studiobhomeware.com

I have also tried to use the coding in the embedded link above and this just ended up with two images been shown one over another rather than a hoover

Thanks 

[KetanKumar]

@JessBo 

if you are able to code try above code and let me know it done customization codde

[JessBo]

Thanks you.

Which coding should I be following there’s a few linked above and I am not entirely sure I follow which one you are referring to? Some links say to update the theme and product coding and some just suggest the Theme. 

Please note my store does not have theme.scss.liquid so do I use theme.css or theme.liquid 

thank you 

[KetanKumar]

@JessBo 

https://www.huratips.com/tech-tips/how-to-make-product-image-change-when-mouse-over-in-shopify.html

[JessBo]

Thank you - when I do this it results in the two images being shown, please see a preview of my duplicate theme where I have added the code below

https://gsho2r052aj8c5bf-53377695903.shopifypreview.com

[KetanKumar]

@JessBo 

can you please update this code product-card-grid 

{% comment %}
    Renders a product card using "Grid" style
    Accepts:
    - max_height: {Number} Maximum height of the product's image (required)
    - product: {Object} Product Liquid object (required)
    - show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)

    Usage:
    {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}
<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
  <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
    <span class="visually-hidden">{{ product.title }}</span>
  </a>

  {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
  {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
  {%- assign preview_image = product.featured_media.preview_image -%}
  {%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

  {% unless preview_image == blank %}
    {% include 'image-style', image: preview_image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
  {% endunless %}

  <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 data-swift-lazy="1" loading="lazy" id="{{ img_id }}"
              class="grid-view-item__image lazyload on-normal"
              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="grid-view-item__image lazyload on-hover" src="{{ product.images[1] | img_url: 'master' }}" alt="{{ product.images[1] | escape }}" />            
      </div>
    </div>
  </div>

  <noscript>
    {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
    <img data-swift-lazy="1" loading="lazy" class="grid-view-item__image" src="{{ preview_image | img_url: image_size, scale: 2 }}" alt="{{ preview_image.alt }}" style="max-width: {{ max_height | times: preview_image.aspect_ratio }}px;">
  </noscript>

  <div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>

  {% include 'product-price-listing', product: product, show_vendor: show_vendor %}

</div>
<style>
.on-hover {
    opacity: 0;
}
.product-card:hover .on-hover {
    opacity: 1;
}
</style>