Add hover effect to product images - Minimal Theme

Tourist
5 0 3

Hi Martin,

 

You're very welcome! The opacity issue was a silly mistake from my side, I didn't notice that the div was inside another div styled with that opacity setting. I changed the class of the "parent" div and everything is working smoothly now.

 

Let me know if you need any help.

 

Good luck!

1 Like
Tourist
5 0 0

@iamdwalin wrote:

Hi Martin,

 

You're very welcome! The opacity issue was a silly mistake from my side, I didn't notice that the div was inside another div styled with that opacity setting. I changed the class of the "parent" div and everything is working smoothly now.

 

Let me know if you need any help.

 

Good luck!


Sorry but I am quite new to the editing of the HTML code. I'm not sure exactly where I should put your code in the product-grid-item file. Also not where you change the "parent" div?

 

I am glad that you managed to get it to work for you, as I am sure it looks awesome for you store. Would be epic if you were able to share how to do it.

 

Many thanks,

Martin

0 Likes
Tourist
5 0 3

Around line 55 you should find something like this:

 

<div id="{{ wrapper_id }}" class="product__img-wrapper supports-js reveal">

If you don't find it, try using CTRL+F and type "img-wrapper", you should see it highlighted.

 

You have to replace that whole "div" element with the code I provided you with.

 

Then you have to edit theme.css file adding the other piece of code (you just have to add it at the end of the file, you don't have to replace anything).

 

Hope this helps :)

 

 

 

 

1 Like
Tourist
5 0 0

Original.PNGOriginal codeReplaced div.PNGUpdated using codeShop.PNGShop

 

Hi again Dwalin,

 

I am gonna pull what little hair I have remaining out... the joys of HTML :D

 

I found the line you mentioned on line 45 in the original product-grid-item.liquid file within Minimal. Can be seen in the photo above.

 

In the second photo above, I added the code as you said. Would you please mind just quickly checking if I put it in right place?

 

The last photo above shows my results... the word "reveal" appears randomly above images and the opacity of the thumbnails is still wrong...

 

If you are out of ideas, I think I might have to just give up on my hope for now haha! Thanks all the same for your support :)

0 Likes
Tourist
5 0 3

Good job! You almost have it. The first "span" above that code should look like this:

 

<span class="grid-link__image-centered">

I can't remember now which class was originally there, but with this one everything works (this fix the opacity issue).

 

Did you add the second piece of code to theme.css?

 

If you're still in trouble after this, feel free to DM me so I can personally help you.

 

0 Likes
New Member
2 0 0

Hi @iamdwalin ,

 

I'm also trying to add the hover effect but I can't get ride of the overlay effect.

Would it be possible to DM you?

 

Thx!

0 Likes
Tourist
5 0 3

Hi Icare, 

 

Sure, I'll do my best to help you!

 

Regards.

0 Likes
Highlighted
New Member
1 0 0

Hi There,

 

I followed your exact directions and the span that encompasses your new div code section is  

<span class="grid-link__image-centered">

but I'm still having opacity issues.  Can you look at my code below for where I need to change the class? Thanks in Advance!!!

 

<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 grid-link__image--loading{% if section.settings.show_sold_out_circle %} grid-link__image-sold-out{% endif %} grid-link__image--product" 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="grid-link__image-centered">
        {% 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 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>
 
0 Likes