Show the overlay closest to the clicked button Jquery

Question

I have multiple cards on a page each with the buttons and overlays having the same class. When I click the ellipsis, the overlay related that ellipse should be shown. I've tried to use .closest() method however it hasn't worked

<div class="col">
  <div class="card">
    <div class="card-header d-flex justify-content-between">
      <div class="d-flex align-items-start">
        <img src="../images/icons/white-logo-icon-only.svg" alt="" class="me-2" />
        <p>Video Subject</p>
      </div>
      <a class="show-overlay"><img src="../images/icons/ellipsis.svg" alt="" /></a>
    </div>
    <div class="card-body d-flex justify-content-center">
      <img src="../images/icons/play-btn.svg" alt="" />
    </div>
    <div class="card-overlay text-center">
      <p>Share via me</p>
      <div class="d-flex share-btn">
        <a href="#"><img src="../images/icons/fb-bg-2.svg" alt="" /></a>
        <a href="#"><img src="../images/icons/whatsapp.svg" alt="" /></a>
        <a href="#"><img src="../images/icons/twit.svg" alt="" /></a>
      </div>
    </div>
  </div>
</div>
<div class="col">
  <div class="card">
    <div class="card-header d-flex justify-content-between">
      <div class="d-flex align-items-start">
        <img src="../images/icons/white-logo-icon-only.svg" alt="" class="me-2" />
        <p>Video Subject</p>
      </div>
      <a class="show-overlay"><img src="../images/icons/ellipsis.svg" alt="" /></a>
    </div>
    <div class="card-body d-flex justify-content-center">
      <img src="../images/icons/play-btn.svg" alt="" />
    </div>
    <div class="card-overlay text-center">
      <p>Share via</p>
      <div class="d-flex share-btn">
        <a href="#"><img src="../images/icons/fb-bg-2.svg" alt="" /></a>
        <a href="#"><img src="../images/icons/whatsapp.svg" alt="" /></a>
        <a href="#"><img src="../images/icons/twit.svg" alt="" /></a>
      </div>
    </div>
  </div>
</div>

show the overlay when the user clicks the ellipsis

   $(".card-overlay").hide();
        $(".show-overlay").click(function () {
    
            $(this).closest(".card-overlay").show();
    
            // $(".card-overlay").show();
        });