Hey!!
Thanks for replying!
I am using the minimal theme and want to add the hover effect to my products. I used the shopify tutorial as well as a couple youtube tutorials with no luck. I also copied your pasted code and it still did not work. Here is my code as is for the product grid item. I started from fresh and deleted all the changes since I was messing up the code.
Thank you for helping!
{% unless current_collection == blank %}
{% assign current_collection = collection %}
{% endunless %}
{% assign on_sale = false %}
{% assign sale_text = 'products.product.sale' | t %}
{% if featured.compare_at_price > featured.price %}
{% assign on_sale = true %}
{% endif %}
{% assign sold_out = true %}
{% assign sold_out_text = 'products.product.sold_out' | t %}
{% if featured.available %}
{% assign sold_out = false %}
{% endif %}
{% if featured.title == '' %}
{% comment %}add default state for product block in storefront editor{% endcomment %}
{% capture product_title %}{{ 'home_page.onboarding.product_title' | t }}{% endcapture %}
{% else %}
{% capture product_title %}{{ featured.title | escape }}{% endcapture %}
{% endif %}
<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">
<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>
{% 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>
