Position <a> tag but don't include overflow (position: absolute) image

Question

So, hard to explain, but I'm trying to position a link over the entire abstract background, but not include the overflow of the other image placed on top. I've tried about everything I could think of, and couldn't come up with a solution. Wrap all the images in the tag, and I couldn't figure out how to size it to only include the abstract background image border. Only wrap the abstract background and text, can't get it to include the overlaid image (within the border of the abstract background of course).

Am I trying to accomplish the impossible?

img {
    max-width: 100%;
}

.cat-item-container {
    display: flex;
    flex-wrap: wrap;
    padding-top: 50px;
}

.category-heading {
    width: 100%;
    text-align: center;
}

.cat-item {
    width: 44%;
    margin: 5% 3%;
    position: relative;
}

.cat-background-img {
    position: relative;
    border-radius: 20px;
}

.cat-background-orange {
    filter: hue-rotate(74deg);
}

.cat-item-img {
    position: absolute;
    z-index: 999;
    bottom: 50%;
    width: 70%;
}

.cat-title-container {
    position: absolute;
    z-index: 9999;
    bottom: 20%;
    left: 5%;
}

.cat-title {
    color: white;
    font-weight: 600;
    font-size: 4vw;
    text-shadow: 0px 0px 7px #3e3e3e;
    margin: 0;
}

.cat-item a {
    display: block;
}

@media screen and (min-width: 1200px) {
    .cat-title {
        font-size: 48px;
    }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="shop-by-category container">
    <div class="category-heading">
        Shop by Category
    </div>
    <div class="cat-item-container">
            <div class="cat-item">
            <a href="/category/water-slides/">
                <img class="cat-item-img water-slide" src="//files.sysers.com/cp/upload/vzcpr/editor/full/blue-marble-water-slide.png">
                <img class="cat-background-img cat-background-orange" src="//files.sysers.com/cp/upload/vzcpr/editor/full/cat-background-orange.jpg">
                <div class="cat-title-container">
                    <p class="cat-title">Water Slides</p>
                </div>
            </a>
            </div>
            <div class="cat-item">
                <img class="cat-item-img combo-house" src="//files.sysers.com/cp/upload/vzcpr/editor/full/Tiki-bounce-combo.png">
            <a href="/category/bounce-and-slide-combos/">
                <img class="cat-background-img" src="//files.sysers.com/cp/upload/vzcpr/editor/full/cat-background-pink.jpg">
                <div class="cat-title-container">
                    <p class="cat-title">Combo Houses</p>
                </div>
            </a>
            </div>
            <div class="cat-item">
                
                <img class="cat-item-img bounce-house" src="//files.sysers.com/cp/upload/vzcpr/editor/full/castle-no-background.png">
                <img class="cat-background-img " src="//files.sysers.com/cp/upload/vzcpr/editor/full/cat-background-blue.jpg">
                <div class="cat-title-container">
                    <a href="/category/bounce-houses/"><p class="cat-title">Bounce Houses</p></a>
                </div>
            </div>
    </div>
</div>

https://jsfiddle.net/61Lh3cyx/

Answer 1

To stop the 'top' of the imgs being part of the linking you could move the anchor element so it is not the parent of either img or the associated text. Move it to just below the text element and make it position absolute, the same height and width as the item and background color transparent.

That way the sticking out bit of the image does not get included, but the whole of the rest of the item is covered so you don't get a gap where the img is.

img {
  max-width: 100%;
}

.cat-item-container {
  display: flex;
  flex-wrap: wrap;
  padding-top: 50px;
}

.category-heading {
  width: 100%;
  text-align: center;
}

.cat-item {
  width: 44%;
  margin: 5% 3%;
  position: relative;
}

.cat-background-img {
  position: relative;
  border-radius: 20px;
}

.cat-background-orange {
  filter: hue-rotate(74deg);
}

.cat-item a {
  position: absolute;
  background-color: transparent;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}

.cat-item-img {
  position: absolute;
  z-index: 999;
  bottom: 50%;
  width: 70%;
}

.cat-title-container {
  position: absolute;
  z-index: 9999;
  bottom: 20%;
  left: 5%;
}

.cat-title {
  color: white;
  font-weight: 600;
  font-size: 4vw;
  text-shadow: 0px 0px 7px #3e3e3e;
  margin: 0;
}

.cat-item a {
  display: block;
}

@media screen and (min-width: 1200px) {
  .cat-title {
    font-size: 48px;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="shop-by-category container">
  <div class="category-heading">
    Shop by Category
  </div>
  <div class="cat-item-container">
    <div class="cat-item">
      <img class="cat-item-img water-slide" src="//files.sysers.com/cp/upload/vzcpr/editor/full/blue-marble-water-slide.png">
      <img class="cat-background-img cat-background-orange" src="//files.sysers.com/cp/upload/vzcpr/editor/full/cat-background-orange.jpg">
      <div class="cat-title-container">
        <p class="cat-title">Water Slides</p>
      </div>
      <a href="/category/water-slides/"></a>
    </div>
    <div class="cat-item">
      <img class="cat-item-img combo-house" src="//files.sysers.com/cp/upload/vzcpr/editor/full/Tiki-bounce-combo.png">
      <img class="cat-background-img" src="//files.sysers.com/cp/upload/vzcpr/editor/full/cat-background-pink.jpg">
      <div class="cat-title-container">
        <p class="cat-title">Combo Houses</p>
      </div>
      <a href="/category/bounce-and-slide-combos/">
      </a>
    </div>
    <div class="cat-item">

      <img class="cat-item-img bounce-house" src="//files.sysers.com/cp/upload/vzcpr/editor/full/castle-no-background.png">
      <img class="cat-background-img " src="//files.sysers.com/cp/upload/vzcpr/editor/full/cat-background-blue.jpg">
      <div class="cat-title-container">
          <p class="cat-title">Bounce Houses</p>
      </div>
        <a href="/category/bounce-houses/"></a>
    </div>
  </div>
</div>