Lookbook Template

{% section "lookbook" %}

<div id="lookbook-wrapper">
  <div id="lookbook-container">

    {% for block in section.blocks %}
      {% if block.settings.lookbook-image != '' %}
        {% if block.settings.lookbook-link != blank %}<a href="{{ block.settings.lookbook-link }}">{% endif %}
          <div class="lookbook-block-wrapper">
            <div class="lookbook-image">
              <img src="{{ block.settings.lookbook-image | img_url: 'master' }}">
            </div>
            {% if block.settings.lookbook-title != '' %}
            <div class="lookbook-text-wrapper">
              <i class="fas fa-reply"></i>
              <div class="lookbook-text-title">{{ block.settings.lookbook-title }}</div>
              {% if block.settings.lookbook-subtitle != '' %}
                <div class="lookbook-text-subtitle">{{ block.settings.lookbook-subtitle }}</div>
              {% endif %}
              {% if block.settings.lookbook-body != '' %}
                <div class="lookbook-text-body">{{ block.settings.lookbook-body }}</div>
              {% endif %}
            </div>
            {% endif %}
          </div>
        {% if block.settings.lookbook-link != blank %}</a>{% endif %}
      {% endif %}
    {% endfor %}  

  </div>
</div>

{% schema %}
{
  "name": "Lookbook Gallery",
  "class": "shopify-section--bordered",
  "settings": [
  ],
  "blocks": [
    {
      "type": "cta",
      "name": "Lookbook Images",
      "settings": [
        {
          "type": "image_picker",
          "id": "lookbook-image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "lookbook-title",
          "label": "Title"
        },
        {
          "type": "text",
          "id": "lookbook-subtitle",
          "label": "Sub-Title"
        },
        {
          "type": "text",
          "id": "lookbook-body",
          "label": "Body"
        },
        {
          "type": "url",
          "id": "lookbook-link",
          "label": "Link"
        }
      ]
    }
  ]
}
{% endschema %}

/* -_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_

 Lookbook Page

-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_ */

#lookbook-wrapper{
    .lookbook-block-wrapper {
        width: calc(25% - 3px);
        display: inline-block;
        position: relative;
        -webkit-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
        overflow: hidden;
        text-align: center;
        .lookbook-image{
            -webkit-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;
        }
        .lookbook-text-wrapper{
            position: absolute;
            -webkit-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;
            opacity: 0;
            padding: 20% 20px;
            right: 0;
            left: 0;
            width: 100%;
            z-index: 2;
            vertical-align: middle;
            bottom: 0;
            margin: 0 auto;
            text-align: center;
            color: white;
            vertical-align: middle;
            background: transparent;
            height: 100%;
            box-shadow: 0;
            .lookbook-text-title{
                font-size: 25px;
                font-weight: bold;
                text-transform: uppercase;
                padding: 3px 0px;
            }
            .lookbook-text-subtitle{
                font-size: 17px;
                margin: 0px -20px;
                padding: 2px 20px;
                font-weight: bold;
                box-shadow: inset 0px -20px 20px -25px #800049, inset 0px 20px 20px -25px #800049;
                text-transform: uppercase;
                border-bottom: 1px solid #800049;
                border-top: 1px solid #800049;
            }
            .lookbook-text-body{
                font-size: 14px;
                padding: 5px 0px;
                line-height: 13px;
            }
        }
    }
    .lookbook-block-wrapper:hover svg{
        position: absolute;
        right: 15px;
        top: 10px;
        color: white;
        font-size: 25px;
        z-index: 9;
        -webkit-transform: rotate(180deg); /* Safari */
        transform: rotate(180deg);
    }
    .lookbook-block-wrapper:hover .lookbook-image{
        transform: scale(1.25);
        -webkit-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }
    .lookbook-block-wrapper:hover .lookbook-text-wrapper{
        -webkit-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
        box-shadow: inset 0px 0px 100px -10px #000;
        opacity: 1;
        background: rgba(211,56,123,.67);
        background: -moz-linear-gradient(left,rgba(211,56,123,.77) 0,rgba(134,40,205,.77) 100%);
        background: -webkit-gradient(left top,right top,color-stop(0,rgba(211,56,123,.77)),color-stop(100%,rgba(134,40,205,.77)));
        background: -webkit-linear-gradient(left,rgba(211,56,123,.77) 0,rgba(134,40,205,.77) 100%);
        background: -o-linear-gradient(left,rgba(211,56,123,.77) 0,rgba(134,40,205,.77) 100%);
        background: -ms-linear-gradient(left,rgba(211,56,123,.77) 0,rgba(134,40,205,.77) 100%);
        background: linear-gradient(to right,rgba(211,56,123,.77) 0,rgba(134,40,205,.77) 100%);
    }
}
@media only screen and (max-width: 1240px) {
    #lookbook-wrapper .lookbook-block-wrapper {
        width: calc(33.33% - 3px);
    }
}
@media only screen and (max-width: 740px) {
    #lookbook-wrapper .lookbook-block-wrapper {
        width: calc(50% - 3px);
        .lookbook-text-wrapper{
            padding: 10% 20px;
        }
    }
}

@media only screen and (max-width: 400px) {
    #lookbook-wrapper .lookbook-block-wrapper {
        width: calc(100% - 3px);
    }
}

<script defer src="//use.fontawesome.com/releases/v5.8.1/js/solid.js" integrity="sha384-IA6YnujJIO+z1m4NKyAGvZ9Wmxrd4Px8WFqhFcgRmwLaJaiwijYgApVpo1MV8p77" crossorigin="anonymous"></script>
<script defer src="//use.fontawesome.com/releases/v5.8.1/js/fontawesome.js" integrity="sha384-EMmnH+Njn8umuoSMZ3Ae3bC9hDknHKOWL2e9WJD/cN6XLeAN7tr5ZQ0Hx5HDHtkS" crossorigin="anonymous"></script>