缩放图像并在悬停时添加文本叠加

Question

我有一组图像显示在另一个下方，第一眼看起来好像是一个完整的图像，但在悬停时图像会在悬停时缩小。

不过，这些图片中的每一个都链接到我网站上的不同页面，所以我还想在悬停时在每张图片的中心添加一些文字。

我找到了很多关于如何添加文本的建议，但没有一个不会破坏我已有的图像过渡效果。

<style>
.image4 {
 -webkit-transition: all 0.7s ease;
 transition: all 0.7s ease;
} 

.image4:hover {
-webkit-transform:scale(0.7);
transform:scale(0.7);
}

</style>

<a>
<A HREF="http://philandkaren.weebly.com/the-day.html">
<img class="image4" src="http://philandkaren.weebly.com/files/theme/Homepage1.jpeg">
</a>

<a>
<A HREF="http://philandkaren.weebly.com/getting-there.html">
<img class="image4" src="http://philandkaren.weebly.com/files/theme/Homepage2.jpeg">
</a>

<a>
<A HREF="http://philandkaren.weebly.com/local-information.html">
<img class="image4" src="http://philandkaren.weebly.com/files/theme/Homepage3.jpeg">
</a>

<a>
<A HREF="http://philandkaren.weebly.com/accommodation.html">
<img class="image4" src="http://philandkaren.weebly.com/files/theme/Homepage4.jpeg">
</a>

<a>
<A HREF="http://philandkaren.weebly.com/taxis.html">
<img class="image4" src="http://philandkaren.weebly.com/files/theme/Homepage5.jpeg">
</a>

<a>
<A HREF="http://philandkaren.weebly.com/honeymoon-fund.html">
<img class="image4" src="http://philandkaren.weebly.com/files/theme/Homepage6.jpeg">
</a>


<a>
<A HREF="http://philandkaren.weebly.com/faqs.html">
<img class="image4" src="http://philandkaren.weebly.com/files/theme/Homepage7.jpeg">
</a>

<a>
<A HREF="http://philandkaren.weebly.com/rsvp.html">
<img class="image4" src="http://philandkaren.weebly.com/files/theme/Homepage8.jpeg">
</a>

有谁知道我可以如何实现我正在寻找的文本叠加，同时保留图像缩放？每张图片为 750 x 128。

Answer 1

将链接用作包装器，使用position:relative 并将您的文本内容添加到绝对定位的叠加层中。

然后将悬停触发器移动到父链接：

a:hover .image4 {
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.image4 {
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
  display: block;
}
a:hover .image4 {
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
}
a {
  margin: 1em;
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: white;
}
a .overlay {
  text-decoration: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity .7s ease;
}
a:hover .overlay {
  opacity: 1;
}

<a HREF="http://philandkaren.weebly.com/faqs.html">
  <img class="image4" src="http://philandkaren.weebly.com/files/theme/Homepage7.jpeg">
  <div class="overlay">
    <h1>OVERLAY TEXT</h1>
  </div>
</a>