html - 添加图像链接会破坏其他一切

Question

所以这是一行简单的图像，带有悬停效果，我让它做我需要的一切，除了当我添加一个链接来打开一个新页面时 所以我需要重新制作所有内容并使用不同的方法还是有办法以某种方式解决问题？谢谢:)

更新!

代码可能不完美，但我添加了

.box-1 一个{显示:内容:

这就解决了一切!

.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

我认为你不小心制作了 <a> position: absolute .而不是使用 :not , 为什么不定位 h2直接.box-1 h2并尝试给它一个宽度和高度