Shopify Collection Gallery – Interactive & Responsive Hover Effect

                    <!-- 
Custom Shopify Collection Gallery
===================================
Tech Stack: 
- HTML, CSS (animations & hover effects)
- Shopify's Liquid templating language

Features:
- Fully responsive interactive collection grid
- Expands on hover with smooth transitions
- Customizable colors, padding, and layout
- SEO-friendly structure with optimized images

Promotion: 
For more prebuilt Shopify templates, visit: https://prebuilttemplates.com/
===================================
-->


<section 
  class="collections-gallery" 
  style="background-color: {{ section.settings.background_color }}; 
         padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;"
>
  <div class="collections-container page-width">
    {% for block in section.blocks %}
      {% assign collection = block.settings.collection %}
      
      {% if collection %}
        <div 
          class="collection-box{% if forloop.first %} default{% endif %}" 
          style="box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);"
        >
          <a href="{{ collection.url }}" class="collection-link">
            
            <img 
              src="{{ collection.image | img_url: 'master' }}" 
              alt="{{ collection.title }}" 
              class="collection-image" 
            />
            
            <div 
              class="collection-title{% if forloop.first %} active{% endif %}"
            >
              <h3>{{ collection.title }}</h3>
            </div>
          </a>
        </div>
      {% endif %}
      
    {% endfor %}
  </div>
</section>


<style>
/* General Styles */
.collections-gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.collections-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  width: 100%;
  position: relative;
}

.collection-box {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: 10px;
  transition: flex 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.collection-box.default {
  flex: 2; /* Default expanded size */
}

/* On hover of the container, shrink the default collection */
.collections-container:hover .collection-box.default {
  flex: 1;
}

/* On hover of any collection, it expands */
.collection-box:hover {
  flex: 2; /* Hovered collection expands */
  transform: scale(1.05);
  box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
}

.collections-container:hover .collection-box:hover {
  flex: 2; /* Keeps the hovered collection expanded */
}

.collection-link {
    display: block;
    width: 100%;
    height: 500px;
    text-decoration: none;
    position: relative;
}

.collection-image {
    width: 100%;
    height: 100%;
    object-position: 0% 0%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
/* Enlarges the image smoothly on hover */
.collection-box:hover .collection-image {
  transform: scale(1.1);
}
.collection-box:hover .collection-title h3, .collection-title.active h3 {
    color: #ffff;
    margin: 0;
    font-size: 24px;
    font-weight: 100;
    letter-spacing: 0em;
    line-height: 1.4;
}
/* Title Styles */
.collection-title {
    height: 50%;
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    text-align: center;
    background: linear-gradient(to top, #654025, rgba(165, 42, 42, 0));
    color: #ffffff;
    padding: 10px 0;
    display: flex;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.4s ease, opacity 0.4s ease;
    align-items: end;
    justify-content: center;
}
.collection-box:hover .collection-title h3 {
    color: #ddd;
    margin: 0;
    font-size: 32px;
    letter-spacing: 0em;
    line-height: 1.4;
}
/* Active title for the default collection */
.collection-title.active {
  bottom: 0;
  opacity: 1;
  transform: translateY(0);
}
 /* a.collection-link:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, #654025, rgba(165, 42, 42, 0));
    height: 50%;
    pointer-events: none;
    right: 0;
} */
  
/* On hover, show the collection title */
.collection-box:hover .collection-title {
  bottom: 0;
  opacity: 1;
  transform: translateY(0); /* Animates the title from bottom to top */
}
</style>
<script>


</script>
{% schema %}
{
  "name": "Collection Gallery",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#f5f5f5"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "default": 50,
      "min": 0,
      "max": 200,
      "step": 10
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "default": 50,
      "min": 0,
      "max": 200,
      "step": 10
    }
  ],
  "blocks": [
    {
      "type": "collection_block",
      "name": "Collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Select Collection"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Collection Gallery",
      "category": "Custom Sections"
    }
  ]
}
{% endschema %}