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]

@Daniel134 

yes please modification this code 

[Daniel134]

I know. 

I am asking you if you can modify this for me and give me the code, as no matter what I try, it does not seem to work. 

To have the second image show on hover. 

[bindwear]

And what would that custom code be? I've been looking everywhere and trying to sort out which image is revealed rather than it being the last image.

[KetanKumar]

@bindwear @Daniel134 

can you please share store url

[Daniel134]

yes, shopshelovesme.com 

[KetanKumar]

@Daniel134 

Yes, please add this code and let me know

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

[Daniel134]

I have not had any luck with this as stated. Currently my code in product-card-grid.liquid looks like this (below) I believe something is implemented incorrectly. Can you please modify the code for me and reply with the proper implementation here. I believe my style.css input is correct: 

<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>
</div>
</div>
</div>
<img class="hidden" src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" />

</div>

[KetanKumar]

@Daniel134 

oh sorry  for this issue, 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.
this code apply for after 5 - 6 second

.product-card:hover .grid-view-item__image {
    display: none;
}
.product-card:hover img.hidden {
    opacity: 1;
    visibility: visible;
}

[Daniel134]

 Thank you very much. It is now sort of working, but is very glitchy. Please see shopshelovesme.com and see below for the full implementation. 

The bottom of my css file looks like this: 

/* ===============================================
// Reveal module
// =============================================== */

.reveal .hidden { display: block !important; visibility: visible !important;}
.product:hover .reveal img { opacity: 1; }
.reveal { position: relative; }
.reveal .hidden {
position: absolute;
z-index: -1;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.reveal:hover .hidden {
z-index: 100000;
opacity: 1;
}
.reveal .caption {
position: absolute;
top: 0;
display: table;
width: 100%;
height: 100%;
background-color: white; /* fallback for IE8 */
background-color: rgba(255, 255, 255, 0.7);
font: 13px/1.6 sans-serif;
text-transform: uppercase;
color: #333;
letter-spacing: 1px;
text-align: center;
text-rendering: optimizeLegibility;
}
.reveal .hidden .caption .centered {
display: table-cell;
vertical-align: middle;
}

@media (min-width: 480px) and (max-width: 979px) {
.reveal .caption {
font-size: 11px;
}
}

.product-card:hover .grid-view-item__image {
display: none;
}
.product-card:hover img.hidden {
opacity: 1;
visibility: visible;
}

The product-card-grid file looks like this: 

<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>
</div>
</div>
</div>
<img class="hidden" src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" />
</div>

[KetanKumar]

@Daniel134 

<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>

[Daniel134]

THANK YOU SO MUCH THAT WORKED PERFECTLY 

[KetanKumar]

@Daniel134 

it's my pleasure to help us

[hefestus]

Hello @KetanKumar thanks in advance for your help and time!

Ive been trying to make it work, but after trying a bunch of different codes and you answers, its still not working, it just shows an empty image when hover:

theme.css:

/* ===============================================
// Reveal module
// =============================================== */

.reveal .hidden { display: block !important; visibility: visible !important;}
.product:hover .reveal img { opacity: 1; }
.reveal { position: relative; }
.reveal .hidden {
position: absolute;
z-index: -1;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.reveal:hover .hidden {
z-index: 100000;
opacity: 1;
}
.reveal .caption {
position: absolute;
top: 0;
display: table;
width: 100%;
height: 100%;
background-color: white; /* fallback for IE8 */
background-color: rgba(255, 255, 255, 0.7);
font: 13px/1.6 sans-serif;
text-transform: uppercase;
color: #333;
letter-spacing: 1px;
text-align: center;
text-rendering: optimizeLegibility;
}
.reveal .hidden .caption .centered {
display: table-cell;
vertical-align: middle;
}

@media (min-width: 480px) and (max-width: 979px) {
.reveal .caption {
font-size: 11px;
}
}

.product-card:hover .grid-view-item__image {
    display: none;
}
.product-card:hover img.hidden {
    opacity: 1;
    visibility: visible;
}

product-card-gris.liquid: 

<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>

The site where you can check it is: https://beatriz-536.myshopify.com/collections/for-her

I hope you can help me with this.

Regards

[KetanKumar]

@hefestus 

thanks for it 

sorry but i can't see above code please add and let me know 

[bellalapa]

I hope that you can help me!! I'm trying to implement the hover over effect on my website as well but it is also not working.

I've followed the steps as listed in https://community.shopify.com/c/shopify-design/collection-add-a-hover-effect-to-product-images-on-yo... but it doesn't work.

My secondary image shows up below the first image or nothing changes at all.

[hefestus]

@KetanKumar 

I took it out after because the site was not good, but now i put back exactly as in my reply, both the theme.css and product-card-grid.liquid 
Same thing happens (blank/no image on hover)

I really appreciate any help on how to make it work to show 2nd image on hover. 

Thanks in advance!

[KetanKumar]

@hefestus 

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.

[hefestus]

@KetanKumar 

Thanks! Site url is the same: https://beatriz-536.myshopify.com/collections/for-her

You can also check it under SHOP menu item, in any of the other pages:  For him / Kids

[KetanKumar]

@hefestus 

thanks for more details 

sorry but i can't see second image code  

otherwise your code work as well

[hefestus]

@KetanKumar 

What do you mean? i dont understand, where that code should be, i have:

theme.css:

/* ===============================================
// Reveal module
// =============================================== */

.reveal .hidden { display: block !important; visibility: visible !important;}
.product:hover .reveal img { opacity: 1; }
.reveal { position: relative; }
.reveal .hidden {
position: absolute;
z-index: -1;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.reveal:hover .hidden {
z-index: 100000;
opacity: 1;
}
.reveal .caption {
position: absolute;
top: 0;
display: table;
width: 100%;
height: 100%;
background-color: white; /* fallback for IE8 */
background-color: rgba(255, 255, 255, 0.7);
font: 13px/1.6 sans-serif;
text-transform: uppercase;
color: #333;
letter-spacing: 1px;
text-align: center;
text-rendering: optimizeLegibility;
}
.reveal .hidden .caption .centered {
display: table-cell;
vertical-align: middle;
}

@media (min-width: 480px) and (max-width: 979px) {
.reveal .caption {
font-size: 11px;
}
}

.product-card:hover .grid-view-item__image {
    display: none;
}
.product-card:hover img.hidden {
    opacity: 1;
    visibility: visible;
}

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

and for product-card-grid.liquid this:

<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>

Where is something missing? What do i need to add? 

Thanks again, hope we can make it work after hs and hs 🙂

[KetanKumar]

@hefestus 

yes that current code please add this code 

[hefestus]

@KetanKumar Which one? There was no code in your answer

[hefestus]

@KetanKumar i accidentally clicked it as solved but its not. I didnt see any new code to add. Can you please let me know?

[KetanKumar]

@hefestus 

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>

[hefestus]

@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>

[KetanKumar]

@hefestus 

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

[hefestus]

@KetanKumar Sure, no problem!

How do i add you, with this email: bamaniyaketan.sky@gmail.com ?

[KetanKumar]

@hefestus 

yes please 

[hefestus]

@KetanKumar i already did

[KetanKumar]

@hefestus 

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 

[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.