注册 登录 充值会员 退出
网站、APP、小程序等定制开发,联系QQ 1206995177 毕业设计 java源码 PHP源码

充值

懒人原生鼠标悬停图片文字动画效果

作者/代码整理:懒人  (源码已亲测,不会安装的可以向QQ1915635791要安装视频教程) 发布日期:2023-04-05
懒人原生鼠标悬停图片文字动画效果
效果描述:
多个图片列表排列后,鼠标悬停在其中一个图片上后,显示标题以及图片文字介绍效果
由下往上滑动展示出来,背景颜色半透明,默认80%透明度,需要的懒人可以自己修改背景颜色以及透明度
原理:
利用jquery的animate动画效果,将遮罩显示的text部分相对定位在li的左侧以及底部,默认高度为0
当鼠标悬停在图片上后,将高度修改为与li的高度一致,这样就会出现一个动画效果
使用方法:
1、将css样式引入到你的网页中
2、将body中的代码部分拷贝到你需要的地方即可