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

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

作者/代码整理：懒人 (转载请附加本文地址，带有“懒人原生”字样的谢绝转载) 发布日期：2014-12-22

效果描述：

多个图片列表排列后，鼠标悬停在其中一个图片上后，显示标题以及图片文字介绍效果

由下往上滑动展示出来，背景颜色半透明，默认80%透明度，需要的懒人可以自己修改背景颜色以及透明度

原理：

利用jquery的animate动画效果，将遮罩显示的text部分相对定位在li的左侧以及底部，默认高度为0

当鼠标悬停在图片上后，将高度修改为与li的高度一致，这样就会出现一个动画效果

使用方法：

1、将css样式引入到你的网页中

2、将body中的代码部分拷贝到你需要的地方即可

声明：凡标题注明“懒人原生”二字，均为本站原创，非书面授权谢绝转载