COLLECTION TEMPLATE PRODUCT CARD GRID IMAGE HOVER EFFECT

 

-------------------------------------------------------------------------------------------------------------------

READ MORE:

https://www.youtube.com/watch?v=cbp37QeRFHw

-------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------

FIND THIS LINE IN SECTION FOLDER FILE collection-template.liquid

{% include 'product-card-grid', max_height: max_height %}

AND ADD CODE

---------------------------------------------------------------------------------------------------------------------------

product-card-grid.liquid CODE

---------------------------------------------------------------------------------------------------------------------------

<!-- Snippets Folder > product-card-grid.liquid -->

<style>

/* =============================================== 

// 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-.grid-view-item__link:hover img.grid-view-item__image{ 

display:none; 

} 

}

secondary
@media screen and (max-width:767px){ 
.has-secondary.grid-view-item__link img.secondary{ 
display:none; 
} 
} 
</style>
{% 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> 

---------------------------------------------------------------------------------------------------------------------------

OR USE THIS CODE

---------------------------------------------------------------------------------------------------------------------------

<style>

/* ===============================================

// Reveal module

// =============================================== */

.reveal .hidden { display: block !important; visibility: visible !important;}

.product:hover .reveal img { opacity: 1; }

.reveal { position: relative; }

.reveal .hidden { 

position: absolute; 

z-index: -1;

top: 0; 

width: 100%; 

height: 100%;  

opacity: 0;

-webkit-transition: opacity 0.3s ease-in-out;

-moz-transition: opacity 0.3s ease-in-out;

-o-transition: opacity 0.3s ease-in-out;

transition: opacity 0.3s ease-in-out;  

}

.reveal:hover .hidden { 

z-index: 100000;

opacity: 1;    

}

.reveal .caption {

position: absolute;

top: 0;  

display: table;

width: 100%;

height: 100%;

background-color: white; /* fallback for IE8 */

background-color: rgba(255, 255, 255, 0.7);

font: 13px/1.6 sans-serif;

text-transform: uppercase;

color: #333;

letter-spacing: 1px;

text-align: center;

text-rendering: optimizeLegibility;

}

.reveal .hidden .caption .centered {

display: table-cell;

vertical-align: middle;

}

@media (min-width: 480px) and (max-width: 979px) {

.reveal .caption { 

font-size: 11px; 

}

}  
</style>
<div class="product-grid-item " id="product-{{ product.variants.first.id }}">
<div class="reveal">
<a  href="{{ product.url | within: collection }}">
<img id="{{ img_id }}"
class="grid-view-item__image lazyload"
src="{{ product.featured_image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ product.featured_image.alt }}">
<img class="hidden" src="{{ product.images.last | img_url: '450x450' }}" alt="{{ product.images.last.alt | escape }}" />
</a>
</div>
<a  href="{{ product.url | within: collection }}">
<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>
</a>
{% include 'product-price', variant: product %}    
</div>  
---------------------------------------------------------------------------------------------------------------------------
OR USE THIS CODE
READ MORE:
https://www.tutorialrepublic.com/faq/how-to-change-image-on-hover-with-css.php
https://sirv.com/help/articles/hover-change-image/
---------------------------------------------------------------------------------------------------------------------------
<!-- https://www.tutorialrepublic.com/faq/how-to-change-image-on-hover-with-css.php -->
<style>
.card {
width: 130px;
height: 195px;
position: relative;
display: inline-block;
margin: 50px;
}
.card .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.card:hover .img-top {
display: inline;
}
</style>
<div class="card">
<a  href="{{ product.url | within: collection }}">      
<img src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.featured_image.alt }}">
<img src="{{ product.images.last | img_url: '450x450' }}" class="img-top" alt="{{ product.images.last.alt | escape }}">
</a>
<a  href="{{ product.url | within: collection }}">
<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>
</a>
{% include 'product-price', variant: product %}
</div>
---------------------------------------------------------------------------------------------------------------------------