缩放图像并在悬停上添加文字覆盖

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>