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

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>