Add hover effect to product images - Minimal Theme

New Member
5 0 0

HEY, disregard the last message! I figured it out

 

Thank you!!

0 Likes
Excursionist
15 0 8
Well done!
0 Likes
New Member
2 0 0

Hi! I was having the same issues as you with confusion on where to add/replace this code + what class needs to be deleted, is there any way you can show the final codes you have in theme.scss as well as the product-grid code?? 

 

Thank you so much! 

0 Likes
New Member
3 0 0

Hi there,

 

First off, I would like to thank you for sharing the hover effect on the minimal theme.

However, I am hoping that you could help clear out a certain problem that I am facing with the amended code that I copied for my "Minimal" theme.

Upon inserting the copied code, my collection does have the hover effect but the products are no longer aligned with the others as some appear to be on a normal size while others are smaller and shrunken. May I know if there is any way that I could fix this?

The following is the copied code that I used on my product. grid liquid

 

 

 

<div class="{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">
  <a href="{{ featured.url | within: collection }}" class="grid-link{% if section.settings.center_grid_link %} text-center{% endif %}">
    <span class="grid-link__image" data-image-wrapper>
      {% if on_sale and section.settings.show_sale_circle %}
        <span class="badge badge--sale">
          <span class="badge__text{% if sale_text.size > 7 %} badge__text--small{% endif %}">{{ 'products.product.sale' | t }}</span>
        </span>
      {% endif %}
      {% if sold_out and section.settings.show_sold_out_circle %}
        <span class="badge badge--sold-out">
          <span class="badge__text{% if sold_out_text.size > 9 %} badge__text--small{% endif %}">{{ 'products.product.sold_out' | t }}</span>
        </span>
      {% endif %}
      <span class="">
        {% if featured.title != '' %}
          {% unless featured.featured_image == blank %}
            {% capture img_id %}ProductImage-{{ featured.featured_image.id }}{% endcapture %}
            {% capture wrapper_id %}ProductImageWrapper-{{ featured.featured_image.id }}{% endcapture %}
            {%- assign img_url = featured.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

            {% include 'image-style' with image: featured.featured_image, width: product_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}
            <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"
                     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>
          {% else %}
            <img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img" data-image>
          {% endunless %}
          <noscript>
            <img src="{{ featured.featured_image.src | img_url: 'large' }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img">
          </noscript>
        {% else %}
          {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
          {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}
      </span>
    </span>
    <p class="grid-link__title">{{ product_title }}</p>
    {% if section.settings.vendor_enable %}
      <p class="grid-link__title grid-link__vendor">{{ featured.vendor }}</p>
    {% endif %}
    {% if featured.title != '' %}
      <p class="grid-link__meta">
        {%- assign price = featured.price | money -%}

        {% if on_sale %}
        <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
        <s class="grid-link__sale_price">{{ featured.compare_at_price | money }}</s>
        {% endif %}
        {% if featured.price_varies %}
          {{ 'products.general.from_html' | t: price: price }}
        {% else %}
          {% if on_sale %}
            <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
          {% else %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
          {% endif %}
          {{ price }}

          {%- assign variant = featured.selected_or_first_available_variant -%}
          {%- if variant.available and variant.unit_price_measurement -%}
            {% include 'product-unit-price', variant: variant, wrapper_class: 'grid-link__unit-price' %}
          {%- endif -%}
        {% endif %}
      </p>
    {% endif %}
  </a>
</div>

 

and the following on my theme.scss liquid:

 

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

 

 

Result:

Screen Shot 2020-09-09 at 7.24.30 pm.pngScreen Shot 2020-09-09 at 7.24.40 pm.png

I highlighted this to point out the problem that I am having regarding the image sizes being different in a row.

I would really appreciate it, if anyone here could help me out with this. 

 

Thank you in advance.

0 Likes
New Member
3 0 0

You can disregard this message, I have found the solution to it. 

 

Thank you

0 Likes
New Member
1 0 0

Hey!

I was wondering how you resolved this issue? I'm having the same problem and can't seem to fix it.

 

Cheers!

0 Likes
Tourist
4 0 2

Thanks for this thread.

I have been able to make this work with the following steps:

1) Go to the Snippets > product-grid-item.liquid file and find this code:

<div id="{{ wrapper_id }}" class="product__img-wrapper supports-js">
    <div style="padding-top:{{ 1 | divided_by: featured.featured_image.aspect_ratio | times: 100}}%;">
        <img id="{{ img_id }}" alt="{{ featured.featured_image.alt | escape }}" class="product__img lazyload" 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" data-image>
    </div>
</div>

Add {% comment %} above it and {% endcomment %} below it.

Then add the code below:

<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: 'large' }}" 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[1] | img_url: 'large' }}" 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[1] | escape }}">
    </div>
</div>

 

2) Go to the Assets > theme.scss.liquid file and add the following css to the bottom of the file:

/*============================================================================
  Show Product 2nd image on hover css
==============================================================================*/
.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: 5;
  opacity: 1;   
}

 

After finishing this, it worked but the images were unclear. This can be solved with this final step:

3) Go to the Snippets > product-grid-item.liquid file, find this code and remove it:

grid-link__image--loading{% if section.settings.show_sold_out_circle %} grid-link__image-sold-out{% endif %} grid-link__image--product

However, I think that the sold out circle will then no longer display on your products…

 

Tourist
4 0 2

There is one issue remaining. The image shown on hover displays at opacity: 0.8 because of interference from this css:

 

.grid-link,
.grid-link--focus {
  position: relative;
  display: block;
  padding-bottom: $gutter;
  line-height: 1.3;

  &:hover,
  &:active {
    .grid-link__image {
      opacity: 0.8;
    }
  }
}

 

 

If 0.8 is changed to 1, the images for collections don't go to 0.8 on hover. So, it becomes unclear that the collection images are links.

An override just for the opacity of the product images is required.

I haven't yet been able to figure out how to do this.

Can you assist, please?

Tourist
4 0 2

This post is a continuation on my previous two posts on this issue.

Instead of overriding the css that changes the opacity of product images to 0.8, I have made the css more specific so that now it only refers to collection images.

Find this css code in the Assets > theme.scss.liquid file:

.grid-link,
.grid-link--focus {
  position: relative;
  display: block;
  padding-bottom: $gutter;
  line-height: 1.3;

  &:hover,
  &:active {
    .grid-link__image {
      opacity: 0.8;
    }
  }
}

 

Replace it with this code (.grid-link__image--collection added behind .grid-link__image

.grid-link,
.grid-link--focus {
  position: relative;
  display: block;
  padding-bottom: $gutter;
  line-height: 1.3;

  &:hover,
  &:active {
    .grid-link__image.grid-link__image--collection {
      opacity: 0.8;
    }
  }
}

 

Now, only the collection images go dim when you hover over them. The product images stay sharp and clear.

0 Likes
Excursionist
15 0 8
Awesome OldJapan, thank you very much for sharing it with us.