gpt4 book ai didi

html - 悬停时将文本滑过图像

转载 作者:太空宇宙 更新时间:2023-11-03 21:27:42 24 4
gpt4 key购买 nike

我正在尝试为某些图像添加 CSS3 悬停效果,以便当有人将鼠标悬停在图像上时,一些文本会在白色背景上向上滑动。我已经尝试了一些指南,但我认为它们与我拥有的其他代码冲突(因为我还在 Angular 落里覆盖了文本和"new"标志。

这是我的代码,您可以看到(包括内联样式)

<img src="http://stuartgreen.me.uk/pontins/wp-content/uploads/2015/07/penguin-test.jpg" style="width: 100%;">
<div style="display: inline-block; position: absolute; top: -11px; right: -11px;">
<img src="http://stuartgreen.me.uk/pontins/wp-content/uploads/2015/07/new-posts.png">
</div>
<div style="position: absolute; left: 0; right: 0; top: 50%; transform: translate(0, -50%); text-align: center;">
<p style="display: inline-block; background: rgba(0, 0, 0, 0.35); font-family: 'Amatic SC'; color: #FFF; text-shadow: 2px 2px 2px #3a3c3d; margin: 0; padding: 10px; font-size: 38px; line-height: 38px;">
Brean Sands
</p>
</div>

最佳答案

这可能会有所帮助。

.img {
position: relative;
border: 10px solid #f00;
display: inline-block;
vertical-align: top;
cursor: pointer;
margin: 10px;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
transition: all .5s;
overflow: hidden;
height: 0;
background: white;
text-align: center;
font-size: 50px;
}
.img:hover .overlay,
.overlay:hover {
height: 100%;
background: white;
}
.img > img {
display: block;
}
<div class="img">
<img src="http://www.placehold.it/300/eee" />
<div class="overlay">Hello!</div>
</div>
<div class="img">
<img src="http://www.placehold.it/400/eee" />
<div class="overlay">Bye!</div>
</div>

关于html - 悬停时将文本滑过图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31643625/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com