缩放图像并在悬停上添加文字覆盖
我有一组图像显示在另一个下面,看起来好像它们是第一眼看到的一个完整图像,但当图像缩小时悬停。缩放图像并在悬停上添加文字覆盖
虽然这些图片中的每一个都链接到我网站上的不同页面,但我还希望在悬停时为每个图片的中心添加一些文字。
我发现了很多关于如何添加文本的建议,但没有一个不会打破我已经具备的图像过渡效果。
<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.
使用该链接作为包装,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>
谢谢 - 这正是我正在寻找的,除了我现在每张图片之间都有差距,所以当第一次看到页面时,他们看起来不像是一张图片。你知道我可以解决吗?我是一个完整的初学者,非常抱歉,如果我从一个陌生的地方开始...... –
这是由内联块元素的空白引起的 - http://*.com/questions/5078239/how -to-除去最空间之间-inline-block的元素。 –
你有一些非常奇怪的加价有....你有链接的链接? –