How to add a button over a image in a grid

[bhristopher]

Hello,

Does anyone know how to add  buttons over images that are in a grid?

Right now, an image is a link to a different page. I want the buttons to be links to the other pages instead.

Current look:

This is how I want it to look:

Url: https://flaud.world/

Password: 35283

[Zworthkey]

@bhristopher 

Welcome to Shopify Community.

Kindly Check this link.
https://www.shopify.in/partners/blog/building-a-clickable-call-to-action-button-for-your-shopify-the...

It will help you to create a Cta Button,

Let me Know if you need Any more Help.

[KetanKumar]

@bhristopher 

sorry for that issue if possible to share this section code so i will check and update

[bhristopher]

@KetanKumar  

Here is what I have as custom liquid tab for the homepage:

<div class="image-grid">
  <a href="https://flaud.world/collections/clothing" class="image-grid-col-2 image-grid-row-2">
    <img src="https://cdn.shopify.com/s/files/1/0549/4279/3789/files/kiy-wht-swtst.png?v=1646111187" style="width: 100%;height: 100%;object-fit: cover;">
  </a>
  <a href="https://flaud.world/collections/leather-goods" class="image-grid-col-2 image-grid-row-2">
    <img src="https://cdn.shopify.com/s/files/1/0549/4279/3789/files/bgs-1350-1.png?v=1646111787" style="width: 100%;height: 100%;object-fit: cover;">
  </a>
</div>

Here is the css I have for the grid:

body {
  margin: 0;
}

.image-grid {
  --gap: 0px;
  --num-cols: 4;
  --row-height: ;

  box-sizing: border-box;
  padding: var(--gap);

  display: grid;
  grid-template-columns: repeat(var(--num-cols), 1fr);
  grid-auto-rows: var(--row-height);
  gap: var(--gap);
}

.image-grid > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-grid-col-2 {
  grid-column: span 2;
}

.image-grid-row-2 {
  grid-row: span 2;
}

/* Anything udner 1024px */
@media screen and (max-width: 1024px) {
  .image-grid {
    --num-cols: 2;
    --row-height: 300px;
  }
}

[Joi_Johnston]

Could I get help with this as well? Thanks so much! 

[Joi_Johnston]

Did the code work? I am trying to do the same thing. 

[KetanKumar]

@Joi_Johnston 

Welcome to the Shopify community!
and Thanks for your Good question. 😊

Please share your site URL,
So I will check and provide a solution here.

[Joi_Johnston]

Thank you!

https://joijohnston.com/