Html 向图像添加链接会破坏其他一切

这是一行简单的图片，带有悬停效果，我让它做我需要的一切，除了添加链接打开新页面 那么，我是否需要重新制作所有内容并使用不同的方法，或者是否有办法解决问题？谢谢：）

更新

代码可能并不完美，但我补充道

.box-1A{ 显示：内容： }

这解决了一切

.container-1{
显示：内联flex；
}
.框-1{
-webkit-box-flex:1；
-moz-box-flex:1；
箱型柔性：1；
-webkit flex:1自动；
flex:1自动；
填充：30px；
文本对齐：居中；
显示：内联块；
位置：相对位置；
}
.box-1：悬停图像{
滤镜：模糊（3px）亮度（85%）；
}
.box-1 img{
宽度：100%；
身高：100%；
过渡：0.1s；
}
.box-1：非（img）{
位置：绝对位置；
最高：30%；
z指数：1；
颜色：#fff；
文本对齐：居中；
宽度：90%；
不透明度：0；
过渡：0.1s；
字母间距：2px；
}
.box-1 h2{
最高：50%；
}
.box-1：悬停：非（img）{
不透明度：1；
}

欢庆
肉桂色
森林

我想你是无意中做出了

位置：绝对

。与其使用

：not

，为什么不直接将

h2

对准

.box-1h2

，并尝试给它一个宽度和高度

我想你是无意中使

位置：绝对
。与其使用
：not
，为什么不直接将
h2
作为目标
.box-1 h2
，并尝试为其指定宽度和高度
在锚定标记中关闭img标记

<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>


欢庆
肉桂色
森林
您在锚定标签中关闭img标签

<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>


欢庆
肉桂色
森林
请注意，
标记不需要也不使用结束斜杠，并且在HTML中从未有过。请注意，
标记不需要也不使用结束斜杠，并且在HTML中从未有过结束斜杠。