Magnific popup is not functioning when I add hover - text on image

Question

I want to add a text when the user hover the mouse on my image gallery and zoom the when they clicked it. It already zooming in but when I add a class and text between the image class the magnific popup is not working. It seems like the text is blocking the image to be selected. I don't know how and what to change. Thanks!

Image Gallery Code:

$(".container").magnificPopup({
  delegate: 'a',
  type: 'image',
  gallery:{
    enabled: true
  }
});

.box{
    width: 270px;
    height: 250px;
    position: relative;
    background-color: rgba(255,102,104,1.00);
    margin: 10px auto;
    cursor: pointer;
}
.box img{
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}
.box:hover::after{
    transform: scale(1, 1.05);
}
.con-text{
    position: absolute;
    color: white;
    bottom: 0;
    width: 270px;
    height: 250px;
    padding: 75px 25px;
    display: none;
    text-align: center;
}
.box:hover .con-text{
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
   <div class="box">
      <a href="https://cdn.pixabay.com/photo/2014/08/21/14/51/pet-423398__180.jpg" class="image">
         <img src="https://cdn.pixabay.com/photo/2014/08/21/14/51/pet-423398__180.jpg" alt="image">
      </a>
      <div class="con-text">  // Magnific popup doesn't work anymore when I add this div
         <h2>Title</h2>
      </div>
   </div>
</div>