Thumbnail / images

                  
										<div class="clearfix text-center mt-4 bg-light bg-gradient-radial-light rounded position-relative">
										  <div class="thumbnail-shadow-drop">

										    <div class="overflow-hidden position-relative">
										      <div class="animate-shine"> 

										        <img src="../demo.files/images/various/thumbnail_ityres.jpg" alt="..." class="img-fluid bg-suprime my-5 mx-4 opacity-9 animate-bounceinup" style="max-height:500px"> 
										      
										      </div>
										    </div>

										  </div>
										</div>
                  
                

                  
										<div class="d-block clearfix p-2 shadow-xs position-relative bg-white transition-all-ease-250 rounded overflow-hidden show-hover-container">

										  <div class="p-5 px-2 m-0 text-center bg-gradient-radial-light rounded position-relative z-index-1 overlay-dark-hover overlay-opacity-3">
										    
										    <!-- image -->
										    <img src="demo.files/images/various/thumbnail_ityres.jpg" alt="..." class="img-fluid bg-suprime opacity--9"> 

										    <!-- hover visible (always visible on mobile) -->
										    <div class="absolute-full z-index-3 text-white text-center d-flex align-items-center justify-content-center show-hover-item">
										      <a href="#" class="btn btn-sm btn-warning transition-hover-top">view item</a>
										    </div>

										  </div>

										</div>
									
								

                  
										<a href="#" class="d-block clearfix p-2 shadow-xs position-relative bg-white transition-all-ease-250 rounded overflow-hidden show-hover-container">

										  <div class="p-5 px-2 m-0 text-center bg-gradient-radial-light rounded position-relative z-index-1 overlay-dark-hover overlay-opacity-3">
										    
										    <!-- image -->
										    <img src="demo.files/images/various/thumbnail_ityres.jpg" alt="..." class="img-fluid bg-suprime opacity--9"> 

										  </div>

										</a>
									
								

                  
										<a href="#" class="d-block clearfix p-2 shadow-xs position-relative bg-white transition-all-ease-250 rounded overflow-hidden show-hover-container">

										  <div class="p-5 px-2 m-0 text-center bg-white rounded position-relative z-index-1 overlay-dark-hover overlay-opacity-3">
										    
										    <!-- image -->
										    <img src="demo.files/images/various/thumbnail_ityres.jpg" alt="..." class="img-fluid bg-suprime opacity--9"> 

										  </div>

										</a>
									
								

                  
										<a href="#" class="d-block clearfix p-2 shadow-xs position-relative rounded overflow-hidden transition-hover-zoom-img">

										  <div class="p-5 px-2 m-0 text-center bg-gradient-radial-light rounded position-relative z-index-1 overlay-dark overlay-opacity-1">
										    
										    <!-- image -->
										    <img src="demo.files/images/various/thumbnail_ityres.jpg" alt="..." class="img-fluid bg-suprime opacity--9"> 

										  </div>

										</a>
                  
                

                  
                    <div class="position-relative bg-white shadow-md rounded p-2 transition-all-ease-250 overflow-hidden show-hover-container">

                      <div class="ratio ratio-16x9 p-5 rounded position-relative z-index-1 overlay-dark-hover overlay-opacity-3 overflow-hidden bg-cover lazy"
                        data-background-image="../demo.files/images/unsplash/products/thumb_330/julian-o-hayon-sDU_o416hlE-unsplash-min.jpg">
                        
                        <!-- hover visible (always visible on mobile) -->
                        <div class="absolute-full z-index-3 text-white text-center d-flex align-items-center justify-content-center show-hover-item">
                          <a href="#" class="btn btn-sm btn-warning transition-hover-top">view item</a>
                        </div>

                      </div>

                      <h3 class="h6 text-center my-3">Landscape</h3>
                    </div>
                  
                

                  
                    <div class="position-relative bg-white shadow-md rounded p-2 transition-all-ease-250 overflow-hidden show-hover-container">

                      <div class="ratio ratio-1x1 p-5 rounded position-relative z-index-1 overlay-dark-hover overlay-opacity-3 overflow-hidden bg-cover lazy"
                        data-background-image="../demo.files/images/unsplash/products/thumb_330/julian-o-hayon-sDU_o416hlE-unsplash-min.jpg">
                        
                        <!-- hover visible (always visible on mobile) -->
                        <div class="absolute-full z-index-3 text-white text-center d-flex align-items-center justify-content-center show-hover-item">
                          <a href="#" class="btn btn-sm btn-warning transition-hover-top">view item</a>
                        </div>

                      </div>

                      <h3 class="h6 text-center my-3">Squared</h3>
                    </div>
                  
                

                  
                    <div class="position-relative bg-white shadow-md rounded p-2 transition-all-ease-250 overflow-hidden show-hover-container">

                      <div style="--bs-aspect-ratio: 150%;" class="ratio p-5 text-center rounded position-relative z-index-1 overlay-dark-hover overlay-opacity-3 overflow-hidden bg-cover lazy"
                        data-background-image="../demo.files/images/unsplash/products/thumb_330/julian-o-hayon-sDU_o416hlE-unsplash-min.jpg">
                        
                        <!-- hover visible (always visible on mobile) -->
                        <div class="absolute-full z-index-3 text-white text-center d-flex align-items-center justify-content-center show-hover-item">
                          <a href="#" class="btn btn-sm btn-warning transition-hover-top">view item</a>
                        </div>

                      </div>

                      <h3 class="h6 text-center my-3">Portrait</h3>
                    </div>