基于html5鼠标悬停图片动画展示效果

分享一款基于html5鼠标悬停图片动画展示效果。里面包含两款不同效果的html5图片展示效果。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

 <div class="wrap" id="wrap"><div style="float: left; padding-top: 30px; text-align: center; width: 100%; font-weight: bolder;color: #ff6600;">这是第一种风格</div><!-- 这个是第一种风格 Satrt--><main><ul class="ul items"><li><figure class="effect-winston"><img src="image/480_yugao.jpg" alt="轻网站公|lila"><figcaption><h2>轻网站公告&nbsp;<span>lila</span></h2><p><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-demo"></i></a><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-buy"></i></a></p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-winston"><img src="image/480_0111.jpg" alt="丽拉|lila"><figcaption><h2>丽拉&nbsp;<span>lila</span></h2><p><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-demo"></i></a><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-buy"></i></a></p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-winston"><img src="image/480_0110.jpg" alt="塔尔|taal"><figcaption><h2>塔尔&nbsp;<span>taal</span></h2><p><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-demo"></i></a><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-buy"></i></a></p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-winston"><img src="image/480_0109.jpg" alt="格瑞斯|grace"><figcaption><h2>格瑞斯&nbsp;<span>grace</span></h2><p><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-demo"></i></a><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-buy"></i></a></p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-winston"><img src="image/480_0108.jpg" alt="赛唯|seawee"><figcaption><h2>赛唯&nbsp;<span>seawee</span></h2><p><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-demo"></i></a><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-buy"></i></a></p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-winston"><img src="image/480_0107.jpg" alt="克里|cree"><figcaption><h2>克里&nbsp;<span>cree</span></h2><p><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-demo"></i></a><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-buy"></i></a></p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-winston"><img src="image/480_0106.jpg" alt="伊丽丝|iris"><figcaption><h2>伊丽丝&nbsp;<span>iris</span></h2><p><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-demo"></i></a><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-buy"></i></a></p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-winston"><img src="image/480_0105.jpg" alt="玛雅|maaya"><figcaption><h2>玛雅&nbsp;<span>maaya</span></h2><p><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-demo"></i></a><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-buy"></i></a></p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-winston"><img src="image/480_0104.jpg" alt="卡那|Carnac"><figcaption><h2>卡那&nbsp;<span>Carnac</span></h2><p><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-demo"></i></a><a href="http://sc.chinaz.com/" target="_blank"><i class="icon-buy"></i></a></p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li></ul></main><!-- 这个是第一种风格 End--><div style="float: left; padding-top: 30px; text-align: center; width: 100%; font-weight: bolder;color: #ff6600;">这是第二种风格</div><!-- 这个是第二种风格 Satrt--><main><ul class="ul items"><li><figure class="effect-jazz"><img src="image/480_soft_days.jpg" alt="云上的日子|soft days"><figcaption><h2>云上的日子<br><span>soft days</span></h2><p>单页</p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-jazz"><img src="image/480_wedding_blessing.jpg" alt="婚礼的祝福|wedding blessing"><figcaption><h2>婚礼的祝福<br><span>wedding blessing</span></h2><p>喜帖</p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-jazz"><img src="image/480_taste.jpg" alt="美食艺术家|taste"><figcaption><h2>美食艺术家<br><span>taste</span></h2><p>餐厅</p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-jazz"><img src="image/480_dreamer.jpg" alt="梦想家|dreamer"><figcaption><h2>梦想家<br><span>dreamer</span></h2><p>商城</p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-jazz"><img src="image/480_maple_leaf.jpg" alt="枫叶街|maple leaf"><figcaption><h2>枫叶街<br><span>maple leaf</span></h2><p>商城</p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-jazz"><img src="image/480_My_Own_Secret.jpg" alt="秘密|My Own Secret"><figcaption><h2>秘密<br><span>My Own Secret</span></h2><p>店铺</p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-jazz"><img src="image/480_wonder_world.jpg" alt="奇世界|wonder world"><figcaption><h2>奇世界<br><span>wonder world</span></h2><p>企业</p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-jazz"><img src="image/480_misical_diary.jpg" alt="音乐日记|misical diary"><figcaption><h2>音乐日记<br><span>misical diary</span></h2><p>音乐</p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li><li><figure class="effect-jazz"><img src="image/480_guess.jpg" alt="猜想|guess"><figcaption><h2>猜想<br><span>guess</span></h2><p>博客</p><a href="http://sc.chinaz.com/" target="_blank">查看更多</a></figcaption></figure></li></ul></main></div>

via：http://***/Article/34610