时间:2023-03-06来源:系统城装机大师作者:佚名
当我们想在图片上面放置一些文字内容时,发现不管怎么放置,要么就是图片影响到文字的观感,要么就是文字挡住图片的细节,那么怎么可以既看到图片的细节又可以看到对图片的文字描述呢?下面一起来看看吧。
实现效果
我们需要将外层的盒子设置相对定位,将其子盒子设置绝对定位,形成子绝父相,当我们触摸图片时,通过 bottom
属性搭配 transition
属性让其以丝滑的动画实现图片上升显示描述的效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<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.5 s ease; transition: all 0.5 s 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> |
到此这篇关于纯CSS实现鼠标悬停图片上升显示描述案例的文章就介绍到这了
2023-03-06
基于css实现炫酷按钮动画效果案例代码2022-12-06
CSS使用SVG实现动态分布的圆环发散路径动画2022-10-02
详解CSS3浏览器兼容新的CSS 伪类函数 :is() 和 :where()示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值...
2022-09-12
在大部分应用中,都是通过使用 JS 脚本实现该方案,虽然效果很好,但是对于使用 JS 来操作出表现层的展示,总感觉有点奇怪,所以尝试下只使用 CSS 来实现我们的打字动画~...
2022-09-12