微信号:CoderRes

介绍:最新鲜的程序员技术文档及相关资源

8 个为图片添加 Hover 效果的 CSS 库

2016-05-01 22:17 Specs

当今时代,网站是与客户进行互动的一种很好的方式,网站中需要添加图片,但单纯的在网站中贴张图片是不够的,你还需要一些效果,使其更加的有趣和具有互动性。因此,本文为大家收集了 8 个为图片添加 Hover 效果的 CSS 库,可以大大的增加你网站的交互性。


1. Aero CSS3 Hover Effects

http://codecanyon.net/item/aero-css3-hover-effects/12472316



这是一个令人印象深刻、轻量级、响应式的图片悬停效果库,完全由纯 CSS3 实现。


2. Imagehover.css

http://www.imagehover.io/



imagehover.css是一个精心设计的CSS库,让你轻松的为图片添加悬停效果。超过 40 种效果,而压缩后只有 19KB 大小。


3. Hover.css

http://ianlunn.github.io/Hover/



由 CSS3 实现的可以为链接、按钮、LOGO、SVG、图片等添加悬停效果的集合,很容易应用到你自己的元素上。提供 CSS / SASS / LESS 版本。


4. iHover

http://gudh.github.io/ihover/dist/



iHover 也是一个令人印象深刻的悬停效果集合。由纯 CSS3 实现,无依赖,可以很好的融合到 Bootstrap 3 中。


5. Image Caption Hover Animation

http://hasinhayder.github.io/ImageCaptionHoverAnimation/



这是一个使用 CSS3 transitions  和 transform 属性实现的使 caption 悬停在图片上的效果的例子。不需要 JavaScript,可以很好的应用于支持 CSS3 的现代浏览器。


6. Bootstrap Hover Image Gallery

https://github.com/miketricking/miketricking.github.io



可以使用/不使用 BootStrap 的图片悬停效果库,效果非常赞。


7. Animatia

http://codecanyon.net/item/animatia-css-image-hover-effects/11711217



Animatia 包含不同类型的设计,比如按钮样式、覆盖效果、图片效果等等。


8. CSS3 Image Hover Effects

http://codecanyon.net/item/css3-image-hover-effects/471215



使用最新的 CSS 属性,实现了 17 种图片悬停效果,用更独特的方式来展示你的图片。


英文原文:http://www.designemag.com/css-libraries-for-adding-image-hover-effects/

译文:http://webres.wang/css-libraries-for-adding-image-hover-effects/

 
程序员资源 更多文章 感谢关注程序员资源公众号 [干货] WEB开发者应该有哪些必备的技能? 程序员应该坚决避免的10种编程坏毛病 GitHub上整理的一些实用工具 据说程序员写完代码是这个样子,99%的人都中枪了
猜您喜欢 在学习用PHP做网站之前 Android 6.0 RuntimePermission 全民刷颜值时代,试试你有没有拖后腿 iOS中集成ijkplayer视频直播框架 DevOps之软件产品管理最佳实践