How can I add a hover effect to my products in the Venture theme?

Technical Q&A
1

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
118514085_1292055997806518_8485628485356292533_n.jpg1536×2048 648 KB

I add the code in the comments

2

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

2. Product-card.liquid

{% unless grid_image_width %}
  {%- assign grid_image_width = '600x600' -%}
{% endunless %}

  
    
    {% if product.images.size > 1 %}
     
    {% endif %}
    
{{ product.title }}

    {% if section.settings.show_vendor %}
      {{ product.vendor }}

    {% endif %}
    
      {% include 'product-price', variant: product %}
4

anyone???

5

@Tejas_Nadpara hey man, read the first messages please!

6

did u fine solution :disappointed_face: