悬停在/文本上的 HTML 模糊图像？

Question

我正在为学校创建一个作品集网站，我正在努力使一张大照片(也是一个链接)变得模糊，并在鼠标悬停时在其上方显示文本。我快完成了，但我遇到了一些问题:

1.) 我这辈子都想不出如何将文字完全居中放置在照片上。我试过使用宽度百分比、填充和边距，但文本从来没有完全居中。我希望它像标题和导航一样工作——居中并对窗口大小调整做出响应。

2.) 我的模糊过渡似乎有点偏离，因为它在将鼠标悬停在照片上时效果很好，但是当我将鼠标悬停在照片上时，它没有过渡出模糊，而是从模糊中分离出来立即没有过渡。这是我的以下代码:

.photowrapper {
  margin: 0 auto;
  align-self: center;
  display: inline-block;
}

.photo1 {
  margin: 0 auto;
  align-self: center;
  overflow: hidden;
}

.photo1:hover img {
  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -ms-filter: blur(3px);
  -o-filter: blur(3px);
  filter: blur(3px);
  transform: scale(1.03);
}

.photo1:hover .img1text {
  -webkit-opacity: 1;
  opacity: 1;
}

.img1text {
  color: white;
  font-family: 'Pragati Narrow', sans-serif;
  font-size: 4em;
  letter-spacing: 2px;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 100%;
  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

<div class="photowrapper">
  <a href="design.html">
    <div class="photo1"><img src="https://via.placeholder.com/350x150?text=%20" alt="Smiley face" height="100%" width="100%" />
      <div class="img1text">DESIGN</div>
    </div>
  </a>
</div>

我还附上了两张图片以供引用: Image before hover Image after hover

我希望我已经提供了足够的信息。非常感谢任何能够提供帮助的人!

Answer 1

删除冗余标记 - 您需要一个包含图像和文本容器的链接:

<a class="photo1">
    <img>
    <div class="img1text">text</div>
</a>

.img1Text是绝对定位的，需要设置为containing block (2) 通过在 .photo1 上设置 position: relative(或任何其他非静态位置)。

要使 .img1Text 居中，您可以使用 transform method :

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

要在进入和退出时都进行转换，请将其移至 img 样式声明:

.photo1 img {
  transition: all .5s ease-in-out;
}

演示:

.photo1 {
  position: relative;
  /** set as the txt con**/
  display: inline-block;
  margin: 0 auto;
  overflow: hidden;
}

.photo1 img {
  transition: all .5s ease-in-out;
}

.photo1:hover img {
  filter: blur(3px);
  transform: scale(1.03);
}

.photo1:hover .img1text {
  opacity: 1;
}

.img1text {
  color: white;
  font-family: 'Pragati Narrow', sans-serif;
  font-size: 4em;
  letter-spacing: 2px;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .5s ease-in-out;
}

<a class="photo1" href="design.html">
  <img src="https://picsum.photos/350/150" alt="Smiley face" height="100%" width="100%" />
  <div class="img1text">DESIGN</div>
</a>