3-Image-collection_pages-listing.liquid

{% comment %}
   The following code defines a Shopify section named "Image Hover Links". 
   Users can select an image, overlay text, and a page or collection.
   The section creates an image container with links to pages or collections.
{% endcomment %}

{% schema %}
{
  "name": "Image Hover Links",
  "settings": [
    {
      "type": "image_picker",
      "id": "image1",
      "label": "Image 1"
    },
    {
      "type": "text",
      "id": "alt1",
      "label": "Image 1 Alt Text",
      "default": "Image 1 Alt Text"
    },
    {
      "type": "text",
      "id": "text1",
      "label": "Overlay Text 1",
      "default": "Overlay Text 1"
    },
    {
      "type": "collection",
      "id": "collection1",
      "label": "Select Collection 1"
    },
    {
      "type": "page",
      "id": "page1",
      "label": "Select Page 1"
    },
    {
      "type": "image_picker",
      "id": "image2",
      "label": "Image 2"
    },
    {
      "type": "text",
      "id": "alt2",
      "label": "Image 2 Alt Text",
      "default": "Image 2 Alt Text"
    },
    {
      "type": "text",
      "id": "text2",
      "label": "Overlay Text 2",
      "default": "Overlay Text 2"
    },
    {
      "type": "collection",
      "id": "collection2",
      "label": "Select Collection 2"
    },
    {
      "type": "page",
      "id": "page2",
      "label": "Select Page 2"
    },
    {
      "type": "image_picker",
      "id": "image3",
      "label": "Image 3"
    },
    {
      "type": "text",
      "id": "alt3",
      "label": "Image 3 Alt Text",
      "default": "Image 3 Alt Text"
    },
    {
      "type": "text",
      "id": "text3",
      "label": "Overlay Text 3",
      "default": "Overlay Text 3"
    },
    {
      "type": "collection",
      "id": "collection3",
      "label": "Select Collection 3"
    },
    {
      "type": "page",
      "id": "page3",
      "label": "Select Page 3"
    }
  ],
  "presets": [
    {
      "category": "Custom",
      "name": "Image Hover Links (Enter a Name)"
    }
  ]
}
{% endschema %}

<div class="image-row">
  <div class="image-container">
    {% if section.settings.page1 != blank %}
        <a href="{{ section.settings.page1.url }}">
          <img width="400" height="400" src="{{ section.settings.image1 | img_url: 'medium' }}" alt="{{ section.settings.alt1 }}">
          <div class="overlay">
            <div class="text">{{ section.settings.text1 }}</div>
          </div>
        </a>
    {% endif %}
    {% if section.settings.collection1 != blank %}
        <a href="{{ section.settings.collection1.url }}">
          <img width="400" height="400" src="{{ section.settings.image1 | img_url: 'medium' }}" alt="{{ section.settings.alt1 }}">
          <div class="overlay">
            <div class="text">{{ section.settings.text1 }}</div>
          </div>
        </a>
    {% endif %}
  </div>
  
   <div class="image-container">
    {% if section.settings.page2 != blank %}
        <a href="{{ section.settings.page2.url }}">
          <img width="400" height="400" src="{{ section.settings.image2 | img_url: 'medium' }}" alt="{{ section.settings.alt2 }}">
          <div class="overlay">
            <div class="text">{{ section.settings.text2 }}</div>
          </div>
        </a>
    {% endif %}
    {% if section.settings.collection2 != blank %}
        <a href="{{ section.settings.collection2.url }}">
          <img width="400" height="400" src="{{ section.settings.image2 | img_url: 'medium' }}" alt="{{ section.settings.alt2 }}">
          <div class="overlay">
            <div class="text">{{ section.settings.text2 }}</div>
          </div>
        </a>
    {% endif %}
  </div>
  
  
  <div class="image-container">
    {% if section.settings.page3 != blank %}
        <a href="{{ section.settings.page3.url }}">
          <img width="400" height="400" src="{{ section.settings.image3 | img_url: 'medium' }}" alt="{{ section.settings.alt3 }}">
          <div class="overlay">
            <div class="text">{{ section.settings.text3 }}</div>
          </div>
        </a>
    {% endif %}
    {% if section.settings.collection3 != blank %}
        <a href="{{ section.settings.collection3.url }}">
          <img width="400" height="400" src="{{ section.settings.image3 | img_url: 'medium' }}" alt="{{ section.settings.alt3 }}">
          <div class="overlay">
            <div class="text">{{ section.settings.text3 }}</div>
          </div>
        </a>
    {% endif %}
  </div>
</div>

{% stylesheet %}
.image-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.image-container {
  position: relative;
  margin: 10px;
  overflow: hidden;
}

.image-container img {
  height: auto;
  width: 100%;
  transition: transform 0.5s ease;
}

.overlay {
 position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    background-color: #00000080;
    color: #fff;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-50%);
    height: 70px;
    transition: height 1s,align-items .5s;
}

.image-container:hover .overlay {
  background-color: rgba(0, 0, 0, 0.5);
  height: 400px;
}

.text {
  font-weight: bold;
  transition: none; /* Disable transition effect for the text */
}

.collection-link {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}

.collection-link:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Zoom effect */
.image-container:hover img {
  transform: scale(1.1); /* You can adjust the scale factor as needed */
}
{% endstylesheet %}

{% javascript %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var imageContainers = document.querySelectorAll('.image-container');
    imageContainers.forEach(function(imageContainer) {
      imageContainer.addEventListener('click', function() {
        this.classList.toggle('zoomed');
      });
    });
  });
</script>
{% endjavascript %}