縮放圖像並在懸停時添加文本覆蓋

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>