Hover effect on products (venture theme)

Demson2020
Excursionist
25 1 3

Hello, 

I want a hover effect on my products, so if someone hover over the product, I want the second picture. 

I saw a video on YT: https://www.youtube.com/watch?v=9uxSrOxxZpY&feature=youtu.be 

I added the code in 'theme.scss.liquid' and in 'product-card.liquid' (I don't have 'product-card-grid.liquid' in my theme?)

If I go then to my website I get an error: look picture below.

 118514085_1292055997806518_8485628485356292533_n.jpg

 

I add the code in the comments
 
 
 
 
Replies 5 (5)

Demson2020
Excursionist
25 1 3

Here can you find the codes that I added: 

1. Theme.scss.liquid

 

 

/* ===============================================
// Reveal module
// =============================================== */
.has-secondary.grid-view-item__link img.secondary{
 display:none;
}

.has-secondary.grid-view-item__link:hover img.secondary{
 display:block;
}

.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
 display:none;
}

@media screen and (min-width:767px){
.has-secondary.grid-view-item__link img.secondary{
 display:none;
}

.has-secondary.grid-view-item__link:hover img.secondary{
 display:block;
}

.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
 display:none;
}
}

@media screen and (max-width:767px){
.has-secondary.grid-view-item__link img.secondary{
 display:none;
}
}

 

 

 
 
 
 

Demson2020
Excursionist
25 1 3

2. Product-card.liquid 

 

 

{% unless grid_image_width %}
  {%- assign grid_image_width = '600x600' -%}
{% endunless %}
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link {% if product.images.size > 1 %} has-secondary{% endif %}" href="{{ product.url | within: collection }}">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}">
    {% if product.images.size > 1 %}
     <img class="secondary" src="{{ product.images.last | img_url: grid_image_width }}" alt="{{ product.images.last.alt | escape }}">
    {% endif %}
    <div class="h4 grid-view-item__title">{{ product.title }}</div>
    {% if section.settings.show_vendor %}
      <div class="grid-view-item__vendor">{{ product.vendor }}</div>
    {% endif %}
    <div class="grid-view-item__meta">
      {% include 'product-price', variant: product %}
    </div>
  </a>
</div>

 

 

 

 

 
 
 
 
 
 
 
 
Demson2020
Excursionist
25 1 3

anyone????

Demson2020
Excursionist
25 1 3

@Tejas_Nadpara hey man, read the first messages please! 

draka
Visitor
1 0 0

did u fine solution 😞