插件描述：Original Hover Effects为我们提供了多种鼠标覆盖图片后的显示样式。该效果由css3打造而成，所以只能运行在支持css3的浏览器中。
Original Hover Effects为我们提供了多种鼠标覆盖图片后的显示样式。该效果由css3打造而成，所以只能运行在支持css3的浏览器中。
使用步骤
1、该效果的html标记很简单而且直观，只需要创建一个包含图片和信息的容器即可。
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="view"> <img src="image.gif"> <div class="mask"> <h2> Title </h2> <p> Your Text </p> <a href="#" class="info">Read More</a> </div></div> |
2、创建好html标记后，我们就可以来设置样式了
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 46 47 48 49 50 51 52 53 54 55 56 | .view { width: 300px; height: 200px; margin: 10px; float: left; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; background: #fff url(../images/bgimg.jpg) no-repeat center center}.view .mask, .view .content { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0}.view img { display: block; position: relative}.view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0}.view p { font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center}.view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; text-transform: uppercase; box-shadow: 0 0 1px #000}.view a.info:hover { box-shadow: 0 0 5px #000} |
3、Original Hover Effects 有10种效果，对于不同的效果与之对应的是不同的样式。我们可以查看示例中的源码来实现相应的效果，在此我就不一一做讲解了。
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com