带有文本的悬停 HTML 模糊图像？

debugcn 发表于 Dev

troo26

我正在为学校创建一个作品集网站，我正在尝试制作一个大照片（这也是一个链接），当鼠标悬停在上面时，它会变得模糊，并且文本会出现在上面。我快到了，但我有几个问题：

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>

我还附上了两张图片以供参考：悬停前的图像悬停后的图像

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

或德罗里

删除多余的标记 - 您需要一个带有图像的链接和一个文本容器：

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

在.img1Text绝对定位，你需要设置它包含块的设置（2） position: relative（或任何其他非静态的位置）上.photo1。

要居中.img1Text，您可以使用转换方法：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。