Blog Detail

<link href="{{"image-gallery.css" | asset_url }}" type="text/css" rel="stylesheet">

<h1 class="customCollageTitle">{{section.settings.custom_collage_title}}</h1>

<div class="customCollage">

{% for blocks in section.blocks %}

<div class="customBlock" style="grid-area:

{% case forloop.index %}

{% when 1 %} a  

{% when 2 %} b

{% when 3 %} c

{% when 4 %} d

{% when 5 %} e

{% when 6 %} f

{% when 7 %} g

{% when 8 %} h 

{% when 9 %} i

{% when 10 %} j

{% when 11 %} k

{% endcase %} ">

<img class="collageImage" src="{{blocks.settings.collage_image | img_url: 'large' }}">

</div>

{% endfor %}

</div>

{% schema %}

{

"name": "Custom College",

"settings": [

{

"type": "text",

"id": "custom_collage_title",

"label": "custom collage title"

}

],

"max_blocks":11,

"blocks":[

{

"name":"college image",

"type":"college_image",

"settings":[

{

"type": "text",

"id": "title",

"label": "collage title"

},

{

 "type": "image_picker",

"id": "collage_image",

 "label": "collage image"

}

]

}

],

"presets": [

{

"name": "Custom Collage"

}

]

}

{% endschema %}

{% stylesheet %}

{% endstylesheet %}

{% javascript %}

{% endjavascript %}

.customCollage{

   width: 100%;

   height: 100%;

   display: grid;

   gap: 15px;

   padding: 10px 50px 50px;

   grid-template-columns: repeat(6, 1fr);

   grid-template-rows: repeat(3, 15vw);

   grid-template-areas: "a a b b c d"

      "e f b b g g"

      "h f i j j k"; 

   position: relative; 

}

 .collageImage{

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 5px;

 }

 .customBlock:hover .collageImage {

    position: absolute;

    width: 40%;

    height: auto;

    inset: 0;

    margin: auto;

    border: 15px solid white;

    box-shadow: 0 0 50px crimson;

 }

 .customCollageTitle{

    text-align: center;

    margin-bottom: 0;

    font-size: clamp(15px, 5vw, 45px);

 }

 @media only screen and (max-width: 600px){

    .customCollage{

       gap: 5px;

    }

    .customBlock:hover .collageImage {

       border: 5px solid white; 

    }

 }