我正在尝试使用.html为我的学校项目创建一个脱机网站，并且尝试使用该网站上的图像按钮（在“为您需要的任何东西购买保险”下）做类似的事情：这里
我有一些图像按钮，我希望它们向上移动，并在用户悬停时在其下方显示文本，就像最近我在第一个共享的网站上的汽车，房屋，汽车，船，卡车按钮的图像按钮所做的一样段落。
我不知道是否只有html才有可能，还是应该由CSS或javascript来实现。
期待您的帮助。谢谢！
您可以尝试这样的事情https://jsfiddle.net/2Lzo9vfc/156/
的HTML
<div class="box">
<a href="#">
<img src="http://placehold.it/150x100" alt="">
<div class="hover-content">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</a>
</div>
的CSS
h3 {
margin-top: 5px;
}
.box {
width: 20%;
text-align: center;
position: relative;
margin-top: 100px;
}
.hover-content {
position: absolute;
top: 0;
opacity: 0;
transition: all 0.3s ease-in;
z-index: 1;
}
.box:hover .hover-content{
top: 50px;
opacity: 1;
}
.box img {
transition: all 0.3s ease-in;
z-index: 2;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.box:hover img {
transform: translateY(-50px);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句