Venture theme - hoover effect for products.

Solved
hunter_official
Explorer
70 0 13

Hello, i'm using Venture theme & came to this tutorial: https://community.shopify.com/c/Shopify-Design/Collection-Add-a-hover-effect-to-product-images-on-yo...

I have pasted all the code at Theme.css.liquid , and need to copy the rest of the code at Product-card but i'm a bit confused.

Here is the code on my page, where do i past the <div class"reveal"> ? 

 

<!-- /snippets/product-card.liquid -->

{% comment %}
  The product card snippet is passed a liquid object, used in this file
  as "product". The object is either "product" or "item", the latter if
  it is from search results.
{% endcomment %}

{%- assign current_variant = product.selected_or_first_available_variant -%}

<a href="{{ product.url | within: collection }}" class="product-card">
  {% comment %} <img src="{{ product.featured_image.src | img_url: '480x480' }}" alt="{{ product.featured_image.alt | escape }}" class="product-card__image"> {% endcomment %}
  {% assign image = product.featured_image %}
  <div class="product-card__image-container">
    <div class="product-card__image-wrapper">
      <div class="product-card__image js" style="max-width: {% include 'image-width' with image: image, width: 235 %}px;" data-image-id="{{ image.id }}" data-image-with-placeholder-wrapper>
        <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100 }}%;">
          {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
          <img class="lazyload"
            data-src="{{ img_url }}"
            data-widths="[100, 140, 180, 250, 305, 440, 610, 720, 930, 1080]"
            data-aspectratio="{{ image.aspect_ratio }}"
            data-sizes="auto"
            data-parent-fit="contain"
            data-image
            alt="{{ image.alt | escape }}">
        </div>
        <div class="placeholder-background placeholder-background--animation" data-image-placeholder></div>
      </div>
      <noscript>
        <img src="{{ product.featured_image.src | img_url: '480x480' }}" alt="{{ product.featured_image.alt | escape }}" class="product-card__image">
      </noscript>
    </div>
  </div>
  <div class="product-card__info">
    {% if settings.product_vendor_enable %}
      <div class="product-card__brand">{{ product.vendor }}</div>
    {% endif %}

    <div class="product-card__name">{{ product.title }}</div>

    {% if product.available %}
      <div class="product-card__price">
        {% if product.compare_at_price > product.price %}
          {% comment %}
            Product is on sale
          {% endcomment %}
          {% if product.price_varies %}
            {% assign sale_price = product.price | money_without_trailing_zeros %}
            {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
          {% else %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
            <s class="product-card__regular-price">{{ product.compare_at_price | money_without_trailing_zeros }}</s>

            <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}

        {% else %}
          {% comment %}
            Not on sale, but could still have varying prices
          {% endcomment %}
          {% if product.price_varies %}
            {% assign price = product.price | money_without_trailing_zeros %}
            {{ 'products.product.from_text_html' | t: price: price }}
          {% else %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}

        {% endif %}
        {%- unless product.price_varies -%}
          {%- if current_variant.unit_price_measurement -%}
            {% include 'product-unit-price', product_variant: current_variant, wrapper_class: "product-card__unit-price" %}
          {%- endif -%}
        {%- endunless -%}
      </div>
    {% else %}
      <div class="product-card__availability">
        {{ 'products.product.sold_out' | t }}
      </div>
    {% endif %}
  </div>

  {% if product.compare_at_price > product.price %}
    {% comment %}
      A visually-hidden label before regular/sale prices clarifies
      prices for screen readers, so hide the sale tag from them.
    {% endcomment %}
    <div class="product-tag product-tag--absolute" aria-hidden="true">
      {{ 'products.product.on_sale' | t }}
    </div>
  {% endif %}
  <div class="product-card__overlay">
    {% assign view_string_length = 'products.product.view' | t | size %}
    <span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
  </div>
</a>
KetanKumar
Shopify Partner
13991 1634 5025

@hunter_official 

same as position for demo

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
hunter_official
Explorer
70 0 13

Can you put where? i don't get it.

0 Likes
paramSoft
Shopify Partner
1405 230 613

This is an accepted solution.

Please add me as a staff member

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
hunter_official
Explorer
70 0 13

Thank you very much for helping me!

You got my recommendationfrom me!

0 Likes