Question

我正在尝试使用.html为我的学校项目创建一个离线网站，我正在尝试使用图像按钮（下面的“为您需要的任何内容获取保险”）本网站： here

我有图像按钮，我很乐意向上移动，当用户盘旋时会在其下方显示文字，就像我最近分享的网站上的汽车，房屋，电机，船，卡车按钮的图像按钮一样在第一段。

我不知道是否可以使用html，或者它应该是使用css或javascript。

期待您的帮助。谢谢！

Answer 1

您可以尝试使用此类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);
}

图像按钮上移并在光标悬停时显示其下方的文本

1 个答案: