Adding link to a image breaks everything else - html

Question

So this is a simple line of images, with hover effects, I have it doing everything I need, except when I add a link to open up a new page
so do i need to remake everything and use a different approach or is there a way to somehow fix the issue? Thanks :)
UPDATE!
The code might not be perfect, but I added
.box-1 a {
display:contents:
}
and that solved everything !
.container-1 {
display: inline-flex;
}
.box-1 {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
padding: 30px;
text-align: center;
display: inline-block;
position: relative;
}
.box-1:hover img {
filter: blur(3px) brightness(85%);
}
.box-1 img {
width: 100%;
height: 100%;
transition: 0.1s;
}
.box-1 :not(img) {
position: absolute;
top: 30%;
z-index: 1;
color: #fff;
text-align: center;
width: 90%;
opacity: 0;
transition: 0.1s;
letter-spacing: 2px;
}
.box-1 h2 {
top: 50%;
}
.box-1:hover :not(img) {
opacity: 1;
}
<div class="container-1">
<div class="box-1">
<a href="c1.html" target="_blank">
<img class="candle-image" src="image/candlesp/IMG_0900.jpg"/></a>
<h2>Festivity</h2>
</div>
<div class="box-1">
<img src="image/candlesp/IMG_0903.jpg" alt="">
<h2>Cinnamon</h2>
</div>
<div class="box-1">
<img src="image/candlesp/IMG_0917.jpg" alt="">
<h2>Forest</h2>
</div>
</div>

Answer 1

I think you are accidentally making <a> position: absolute. Instead of using :not, why not target the h2 directly .box-1 h2 and also try giving it a width and height

Answer 2

You close img tag in anchor tag
<div class="container-1">
<div class="box-1">
<a href="c1.html" target="_blank">
<img class="candle-image" src="image/candlesp/IMG_0900.jpg"></a>
<h2>Festivity</h2>
</div>
<div class="box-1">
<img src="image/candlesp/IMG_0903.jpg" alt="">
<h2>Cinnamon</h2>
</div>
<div class="box-1">
<img src="image/candlesp/IMG_0917.jpg" alt="">
<h2>Forest</h2>
</div>
</div>