Web知识:纯CSS实现鼠标悬停图片上升显示描述案例

2年前 (2024-04-08)CSS2.7k

复制本页网址打印

前言

当我们想在图片上面放置一些文字内容时，发现不管怎么放置，要么就是图片影响到文字的观感，要么就是文字挡住图片的细节，那么怎么可以既看到图片的细节又可以看到对图片的文字描述呢？下面一起来看看吧。

实现效果

实现思路

我们需要将外层的盒子设置相对定位，将其子盒子设置绝对定位，形成子绝父相，当我们触摸图片时，通过 bottom 属性搭配 transition 属性让其以丝滑的动画实现图片上升显示描述的效果。

完整源码

  <template>    <div class="parentBox">      <div class="imgBox">        <img src="https://i.postimg.cc/4xxZNsL6/1677486088618.png">      </div>      <div class="contantBox">详细内容</div>    </div>  </template>  <style scoped>  .parentBox {    box-shadow: 2px 2px 8px -1px cornflowerblue;    width: 200px;    height: 200px;    position: relative;    cursor: pointer;  }    .imgBox {    position: absolute;    width: 100%;    height: 100%;    z-index: 20;    -webkit-transition: all 0.5s ease;    transition: all 0.5s ease;    bottom: 0;  }  img {    width: 100%;    height: 100%;  }    .parentBox:hover .imgBox {    bottom: 60px;  }    .contantBox {    padding: 4px;    color: white;    width: 100%;    height: 60px;    background: cornflowerblue;    position: absolute;    bottom: 0;  }  </style>

Web知识:纯CSS实现鼠标悬停图片上升显示描述案例都看到这里了，搬砖不易，给小编点个赞呗，以后我会更有动力分享哦~

打赏

重要声明
当前栏目内容除非特别标注，否则均来源于网络公开信息整理分享，本站不提供存储和下载服务，且无法保证第三方链接永久可靠。您若对本站或当前页面内容有疑问或者建议，欢迎联系我们反馈，我们将尽快与您互动，谢谢支持！