CSS grid Image Gallery Customization In Dawn Theme

[MuneebJoiya]

I have a CSS grid made by me and I want to add a button, rich text and Heading on the grid images. But the buttons are showing just beneath the grid.

{% schema %}
{
  "name": "Grid layout",
  "settings": [],
  "blocks": [
    {
      "name": "Collage Image",
      "type": "collage_image",
      "settings": [
        {
          "type": "image_picker",
          "id": "collage_image",
          "label": "Collage Image"
        },
        {
          "type": "checkbox",
          "id": "show_button",
          "label": "Show Button"
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Button Text",
          "default": "Learn More"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button Link"
        },
        {
          "type": "select",
          "id": "button_position",
          "label": "Button Position",
          "options": [
            {
              "value": "top-left",
              "label": "Top Left"
            },
            {
              "value": "top-right",
              "label": "Top Right"
            },
            {
              "value": "bottom-left",
              "label": "Bottom Left"
            },
            {
              "value": "bottom-right",
              "label": "Bottom Right"
            }
          ]
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "rich_text",
          "label": "Rich Text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Grid Layout"
    }
  ]
}
{% endschema %}

<style>
.customCollage {
  width: 100%;
  height: auto;
  display: grid;
  grid-column-gap: 15px;
  padding: 50px;
  grid-template-columns: repeat(2, 46vw);
  grid-template-rows: repeat(2, 37vw);
  grid-template-areas:
    "a b"
    "a c";
  justify-content: center;
}

.collageImageContainer {
  position: relative;
  overflow: hidden; /* Hide any overflow from the image */
}

.collageImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imageOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
}

.customButton {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
}

.richText {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 5px;
  max-width: 70%;
}
</style>

<div class="customCollage">
  {% for block in section.blocks %}
      <div class="collageImageContainer">
    <div class="customBlock" style="grid-area:
      {% case forloop.index %}
        {% when 1 %} a
        {% when 2 %} b
        {% when 3 %} c
      {% endcase %};">
        <img class="collageImage" src="{{ block.settings.collage_image | img_url: 'large' }}" loading="lazy" width="100%" height="100%">
        <h2>{{ block.settings.heading }}</h2>
        <div class="richText">{{ block.settings.rich_text }}</div>
        {% if block.settings.show_button %}
          <a href="{{ block.settings.button_link }}" class="customButton">{{ block.settings.button_text }}</a>
        {% endif %}
      </div>
    </div>
  {% endfor %}
</div>

 I want the grid to be like this

 But mine is Like this I only want the text and button to show on top the image not beneath. And when I show the button it also takes grid area I don't want that type of layout

[Moeed]

Hey @MuneebJoiya 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

[MuneebJoiya]

https://theese-ca.myshopify.com/

Password : stiesk

[Moeed]

Hey @MuneebJoiya 

I'm unable to locate any button on the website, can you please add the buttons first?

[MuneebJoiya]

Please check again I have enabled the button

[Moeed · Accepted solution]

Hey @MuneebJoiya 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.customButton {
    z-index: 1 !important;
    position: inherit;
    bottom: 150px;
    left: 630px;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[MuneebJoiya]

But Text Remain there I also want text there

[MuneebJoiya]

And also the right grid-area a image to be fully matched like the screenshot I provided in My first Question