COLLECTION TEMPLATE PRODUCT CARD GRID FILP CARD 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

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

<!-- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card -->

<style>

.flip-card {

background-color: transparent;

width: 200px;

height: 200px;

margin: 30px;

}

.flip-card-inner {

position: relative;

width: 200px;

height: 200px;

text-align: center;

transition: transform 0.6s;

transform-style: preserve-3d;

box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

}

.flip-card:hover .flip-card-inner {

transform: rotateY(180deg);

}

.flip-card-front, .flip-card-back {

position: absolute;

width: 200px;

height: 200px;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

}

.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
</style>
<div class="flip-card">
<div class="flip-card-inner">
<a  href="{{ product.url | within: collection }}"> 
<div class="flip-card-front">
<img src="{{ product.featured_image | img_url: '200x200' }}" alt="{{ product.featured_image.alt }}">
</div>
<div class="flip-card-back">
<img src="{{ product.images.last | img_url: '200x200' }}" alt="{{ product.images.last.alt | escape }}">
</div>
</a>
</div>
 </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 %}
---------------------------------------------------------------------------------------------------------------------------
OTHER CODE
https://www.w3schools.com/howto/howto_css_flip_box.asp
CHANGE  ROTATE DIRECTION X TO Y
/*  transform: rotateY(180deg);*/
---------------------------------------------------------------------------------------------------------------------------
<style>
.flip-box {
 background-color: transparent;
 width: 200px;
height: 200px;
 border: 1px solid #f1f1f1;
 margin: 30px;
}
.flip-box-inner {
 position: relative;
 width: 200px;
height: 200px;
 text-align: center;
 transition: transform 0.8s;
 transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
 transform: rotateX(180deg);  
}
.flip-box-front, .flip-box-back {
 position: absolute;
 width: 200px;
height: 200px;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
}
.flip-box-front {
 background-color: #bbb;
 color: black;
}
.flip-box-back {
 background-color: dodgerblue;
 color: white;
 transform: rotateX(180deg); 
}
</style>
<div class="flip-box">
 <div class="flip-box-inner">
<a href="{{ product.url | within: collection }}"> 
 <div class="flip-box-front">
<img src="{{ product.featured_image | img_url: '200x200' }}" alt="{{ product.featured_image.alt }}">
 </div>
 <div class="flip-box-back">
<img src="{{ product.images.last | img_url: '200x200' }}" alt="{{ product.images.last.alt | escape }}">
 </div>
 </a>
 </div>
</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 %}

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