How to add Transparent Cicle Cut Effect on Div?

Question

Trying to add Transparent circle cut effect. But when I add effect in div can't add content inside the div and when I add content can't manage the Transparent cut effect. Why this is happening?

.kashif-content>.kashif-content-cards {
  margin: 50px 0;
}

.kashif-content>.kashif-content-cards>.kashif-content-cards-header {
  padding: 0 20px;
}

.kashif-content>.kashif-content-cards>.kashif-content-cards-header>h2 {
  margin: 0;
  padding: 0;
  font-weight: 700;
  color: #091E42;
  line-height: 28px;
}

.kashif-content>.kashif-content-cards>.kashif-content-cards-header>p {
  color: #8993A4;
  padding-bottom: 16px;
  line-height: 20px;
  margin-top: 10px;
}

.kashif-content>.kashif-content-cards>.kashif-content-cards-footer {
  margin: 20px 0;
  display: flex;
  flex-direction: row;
}

.kashif-content>.kashif-content-cards>.kashif-content-cards-footer .residential-card {
  margin: 0 0 0 20px;
}

.kashif-content>.kashif-content-cards>.kashif-content-cards-footer .residential-card>.residential-card-top {
  width: 408px;
  height: 234px;
  background: url('https://picsum.photos/408/234');
  background-size: 100% 100%;
  object-fit: cover;
  background-position: cover;
  background-color: #f4f5f6;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 17px 0;
  position: relative;
  z-index: -5;
}

.kashif-content>.kashif-content-cards>.kashif-content-cards-footer .residential-card>.residential-card-top>p {
  background-color: #B00AB6;
  color: #ffffff;
  font-size: 8px;
  height: 16px;
  width: 44px;
  padding: 2px 4px;
  line-height: 10px;
  border-color: #B00AB6;
  border-radius: 3px;
}

.kashif-content>.kashif-content-cards>.kashif-content-cards-footer .residential-card>.residential-card-top>.star>i {
  background: #151C22B3;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  margin-right: 15px;
}

.kashif-content>.kashif-content-cards>.kashif-content-cards-footer .residential-card>.residential-card-bottom {
  position: absolute;
  width: 346px;
  height: 185px;
  padding: 0 10px 30px 40px;
  margin: -50px 31px 30px 31px;
  box-shadow: 10px 10px 20px grey;
  background-color: #ffffff;
  border-radius: 10px;
}

.kashif-content>.kashif-content-cards>.kashif-content-cards-footer .residential-card>.residential-card-bottom>img {
  border-radius: 50%;
  margin-top: -32px;
  border: 5px solid transparent;
}

.kashif-content>.kashif-content-cards>.kashif-content-cards-footer .residential-card>.residential-card-bottom>h5 {
  font-size: 16px;
  color: #091E42;
  font-weight: bold;
  line-height: 20px;
  background: #ffffff;
}

.kashif-content>.kashif-content-cards>.kashif-content-cards-footer .residential-card>.residential-card-bottom>p {
  font-size: 14px;
  line-height: 14px;
  color: #8993A4;
}

.kashif-content>.kashif-content-cards>.kashif-content-cards-footer .residential-card>.residential-card-bottom>h4 {
  font-size: 16px;
  color: #091E42;
  line-height: 20px;
}

<div class="kashif-content">
  <div class=" kashif-content-cards ">
    <div class="kashif-content-cards-header ">
      <h2>Handpicked Residential Projects</h2>
      <p>Featured Residential projects across India</p>
    </div>
    <div class="kashif-content-cards-footer ">

      <div class="residential-card ">

        <div class="residential-card-top ">
          <p>Featured</p>
          <div class="star "><i class="far fa-star "></i></div>
        </div>
        <div class="residential-card-bottom ">
          <img src="https://picsum.photos/64/64 " />
          <h5>NVT Stopping by the woods</h5>
          <p>4 BHK Independent House/Villa, Whitefield, Bangalore East</p>
          <h4>₹ 2.02 - 2.92 Cr</h4>
        </div>

      </div>
    </div>
  </div>
</div>

CODE EXPLANATION

• Trying to mimic card from 99acres.com
• Card div is divided into two parts header and footer.
• Header part contains the heading of the div.
• Footer part contains the card which is further divided into top and bottom section.
• Top section contains the background image and content on it.
• Bottom section is where I want to have circle cut effect arount the image and also want to show the content of the div.