Add hover effect to product images - Minimal Theme

Shopify Partner
3 0 1

Hi there, has anybody found a solution to being able to add a hover effect on their product images on the minimal theme? I have tried to follow this tutorial but still the hover effect does not seem to work for me https://help.shopify.com/en/themes/customization/collections/add-hover-effect-to-product-images

 

Thanks

Jag

1 Like
Community Manager
Community Manager
2495 171 375

Hi Jag, 

Nick here from Shopify! 

Good job on finding the tutorial and giving it a go, as making changes like this are not easy even at the best of times. 

As mentioned in the guide, it does state that it is an advanced tutorial and not supported by Shopify. If it's not working with the changes you made, it could be worth looking into a Shopify expert to help you with it. Shopify Experts small tasks is something I would recommend. It's where our experts offer small tasks to help merchants like yourself at an affordable price. 

All the best. ?

Nick

Nick | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
4 0 0

Ok so what if one wants to learn instead of paying someone to do it .......

0 Likes
Community Manager
Community Manager
2495 171 375

Hi Tmax, 

Nick here from Shopify. 

If someone wants to learn how to do it, then that's great. As mentioned in the conversation above, there is a guide which you can find here on how to do it should someone want to learn how to do it themselves. ?

All the best, Nick

Nick | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
4 0 0

but its not working for the minimal theme

 

0 Likes
Community Manager
Community Manager
2495 171 375

Hi Tmax, 

I reached out to our theme support team to find out why this might be. They mentioned, something to note is that the unsupported Shopify tutorials are provided as-is. Because every theme in the Shopify theme store is coded differently a complex customization like this might work better for some themes than others, or it might work better for a specific version of a theme but not for a more recent one should there have been any updates. 

I know this isn't ideal, but can you share what exactly isn't working for you on the Minimal theme with this. Even though it is an un-supported tutorial, I can still bring the feedback back to the team to work on this for potential future updates. 

All the best, Nick

Nick | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
1 0 1

Hey Jag, just in case you're still searching for an answer I just had the same issue and found adding this : 

 

.reveal {
position: static;
}

 

to Asset 

theme.scss.liquid
 worked a treat :-) 
1 Like
Tourist
26 0 0

@baseborn 

Do you follow the above tutorial and add the code you suggested? Where do you add the code on the theme.scss.liquid ?

thanks!

0 Likes
Tourist
5 0 3

This thread may be outdated, but I suppose there are still people wondering how to achieve this in Minimal Theme :)

 

I almost got it, I just have a problem with the "opacity" of the images.

 

Inspired by the Shopify's Tutorial and this thread, I've added to the product-grid-item file this piece of code:

 

<div id="{{ wrapper_id }}" class="product__img-wrapper supports-js reveal">
     <div style="padding-top:{{ 1 | divided_by: featured.featured_image.aspect_ratio | times: 100}}%;">
                 <img id="{{ img_id }}"
			 class="product__img reveal"
			 src="{{ featured.featured_image | img_url: '300x300' }}"
			 data-src="{{ img_url }}"
			 data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
			 data-aspectratio="{{ featured.featured_image.aspect_ratio }}"
			 data-sizes="auto"
			 alt="{{ featured.featured_image.alt | escape }}">
		  <img id="{{ img_id }}"
			 class="product__img hidden"
			 src="{{ product.images.last | img_url: '300x300' }}"
			 data-src="{{ img_url}}"
			 data-widths="[150, 220, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
			 data-aspectratio="{{ product.images.last.aspect_ratio }}"
			 data-sizes="auto"
			 alt="{{ product.images.last | escape }}">                          
	</div>
</div>

Then, in theme.css I added this:

 

.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; 
  }
}

.reveal {
  position: static;
}

Now the hoving effect is working properly, but both images seem to be under an opacity layer. I tried to change the opacity settings of the above CSS code but it's not working (or maybe I'm not doing it properly...), it is like there is ANOTHER class changing the opacity. I attach a picture for your reference.

 

Captura.JPG

Does anyone know how to fix it? There must be a way to delete that opacity setting that doesn't allow us to see both pictures clear.

 

Thanks in advance and I hope the above code helps you!

1 Like
Tourist
5 0 0

Hi iamdwalin,

 

Thank you so much for that code. I am gonna try. Did you ever manage to solve the opacity issue?

 

Thanks

Martin

0 Likes