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的位置是绝对的，您需要通过在position: relative上设置.photo1（或任何其他非静态位置）来设置containing block（2）。 / p>

要使.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>

Answer 2

1。）我一辈子都无法弄清楚如何将文字完全放在照片上。我尝试过使用宽度百分比，填充和边距，但是文本永远不会完美居中。我想要它，使其像标题和导航一样居中并响应窗口大小调整。

要使文本居中，必须确保图像和文本块具有相同的宽度，然后使用text-align: center;。如果文本有点偏移（如您的照片中所示），则可能意味着宽度不相同，或者也出现了填充和/或边距。如果不实时查看代码，就很难确定。

2。）我的模糊过渡似乎有点不对，因为将鼠标悬停在照片上时它可以正常工作，但是当我将鼠标悬停在照片上时，它不是从模糊中过渡，而是从模糊中分离出来立即没有过渡。这是我的以下代码：

将相同的transition规则添加到.photo1类中。将过渡添加到.photo1:hover时，过渡将应用于鼠标。在基类上没有transition的情况下，鼠标移出时它将立即转换。

将类和悬停视为两个不同的状态。如果您希望两者共享相同的过渡效果，则必须都应用规则。

Answer 3

模糊过渡问题，将模糊语句移动到元素而不是悬停元素上：

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

.photo1:hover img {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -ms-filter: blur(3px);
  -o-filter: blur(3px);
  filter: blur(3px);
  transform: scale(1.03);
}

以文本为中心的问题：

.photo1 {
  display:flex;
  justify-content:center;
  align-items:center;
}

参考资料：

https://developer.mozilla.org/en-US/search?q=display+flex&topic=api&topic=css&topic=canvas&topic=html&topic=http&topic=js&topic=mobile&topic=apps&topic=svg&topic=webdev&topic=standards&topic=webext&topic=webgl

codepen：https://codepen.io/carolmckayau/pen/XxZbMm

Answer 4

使用相对于类 .photo1 的位置，如下所示。

.photo1 {
    margin: 0 auto;
    align-self: center;
    overflow: hidden;
    position: relative;/*newly added*/
}

Answer 5

.photowrapper {
  margin: 0 auto;
  align-self: center;
  display: inline-block;
}

.photo1 {
     margin: 0 auto;
    align-self: center;
    overflow: hidden;
    position: relative;
}

.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: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
  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>

您应将父div设置为position:relative，然后将孩子设置为position:absolute

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

5 个答案: