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

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>