縮放圖像並在懸停上添加文字覆蓋

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乘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>