COLLECTION TEMPLATE PRODUCT CARD GRID IMAGE OVERLAY SLIDE EFFECT

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

READ MORE:

https://codepen.io/ivanhjc/pen/ZdPWRo

https://codeshack.io/css3-image-overlay-effects-example/

http://jsfiddle.net/2vLjU/1/

https://tympanus.net/TipsTricks/FastHoverSlideshow/

https://www.tutorialspoint.com/how-to-create-image-overlay-hover-slide-effects-with-css

https://www.w3schools.com/howto/howto_css_image_overlay_slide.asp

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

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

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

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

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.tutorialspoint.com/how-to-create-image-overlay-hover-slide-effects-with-css 

USE SAME SIZE IMAGE

https://www.w3schools.com/css/img_5terre.jpg

https://www.w3schools.com/css/img_forest.jpg

-->

<style>

.card-container {

position: relative;

width: 50%;

}

img {

display: block;

width: 100%;

}

.overlay {

position: absolute;

bottom: 100%;

background-color: rgb(55, 74, 179);

overflow: hidden;

width: 100%;

height: 0;

transition: .5s ease-in-out;

}

.card-container:hover .overlay {

bottom: 0;

height: 100%;

}

.caption {
color: white;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
}
</style>
​
<div class="card-container">
<a  href="{{ product.url | within: collection }}"> 
<img src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.featured_image.alt }}">
<div class="overlay">
<img src="{{ product.images.last | img_url: '300x300' }}" alt="{{ product.images.last.alt | escape }}">
</div> 
</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 %}

-----------------------------------------------------------------------------
OR USE THIS CODE
Slide in Overlay from the Bottom
bottom:0%;

Slide in Overlay from the Top
bottom:100%;

READ MORE:
https://www.w3schools.com/howto/howto_css_image_overlay_slide.asp
---------------------------------------------------------------------------------------------------------------------------
<!-- 
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_slidetop
USE SAME SIZE IMAGE
https://www.w3schools.com/css/img_5terre.jpg
https://www.w3schools.com/css/img_forest.jpg
-->
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%; /*FOR BOTTOM TO TOP= bottom:0%;*/ 
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
</style>
<div class="container">
<a  href="{{ product.url | within: collection }}"> 
<img src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.featured_image.alt }}">
<div class="overlay">
<img src="{{ product.images.last | img_url: '300x300' }}" alt="{{ product.images.last.alt | escape }}">
</div> 
</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 %}
---------------------------------------------------------------------------------------------------------------------------
IMAGE OVERLAY SLIDE RIGHT TO LEFT CODES
ONLY CHANGE CSS CODE

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_slideleft
---------------------------------------------------------------------------
.overlay {
  position: absolute;
  bottom:0;
  left:100%;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: .5s ease;
}
.container:hover .overlay {
  left:0;
  width: 100%;
}
---------------------------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------------------
CODE :1
---------------------------------------------------------------------------------------------------------------------------
<style>
.overlay {
position: absolute;
bottom: 100%; /*FOR BOTTOM TO TOP= bottom:0%;*/ 
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;

bottom:0%; /*FOR BOTTOM TO TOP= bottom:0%;*/ 
left:100%;  
height: 100%    
}
.container:hover .overlay {
bottom: 0;
height: 100%;
  
width: 100%;
left: 0;  
}
</style>
-----------------------------------------------------------------------------------------------------------------------
CODE :2
-----------------------------------------------------------------------------------------------------------------------
.overlay {
visibility: hidden;
opacity: 0;
position: absolute;
bottom: 0%;
left: 100%;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:100%;
transition: .5s ease;
}
.container:hover .overlay {
visibility: visible;
opacity: 1;
bottom: 0;
height: 100%;
width: 100%;
left: 0;
}
------------------------------------------------------------------------------------------------------------------
CODE :2.1
------------------------------------------------------------------------------------------------------------------
.overlay {
visibility: hidden;
opacity: 0;
position: absolute;
bottom:0;
left: -102%;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
visibility: visible;
opacity: 1;
left:0;
width: 100%;
}
---------------------------------------------------------------------------------------------------------------------
CODE :3
---------------------------------------------------------------------------------------------------------------------
.overlay {
position: absolute;
top: 0;
visibility: hidden;
left: 0;
right: 0;
margin: auto;
width: auto;
opacity: 0;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.container:hover .overlay {
visibility: visible;
opacity: 1;
top: 50%;
-webkit-transform: translate(0,-50%);
-moz-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
-o-transform: translate(0,-50%);
transform: translate(0,-50%)
}
---------------------------------------------------------------------------------

<style>
.container {
position:relative;
}
.overlay {
position:absolute;
transition:.5s ease;
bottom:0%; 
left:-160%; 
}
.container:hover .overlay {
left: 0;  
}
</style>
<div class="container">
<img src="https://dummyimage.com/200x200/000/fff">
<div class="overlay">
<img src="https://dummyimage.com/200x200/ff0000/fff">
</div>
</div>