图片集鼠标悬停CSS3过渡效果代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是图片集鼠标悬停CSS3过渡效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片集鼠标悬停CSS3过渡效果</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
  <ul class="showcase">
    <li class="thumb1"> <a href="#"><img src="images/thumb1.jpg" width="500" height="374" alt="web3canvas">
      <h3>My Profile<i>+</i></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem leo. Pellentesque et libero id lectus pretium lacinia...</p>
      </a> </li>
    <li class="thumb2"> <a href="http://web3canvas.com/" target="_blank"><img src="images/thumb2.jpg" width="500" height="374" alt="web3canvas">
      <h3>Photo Club App<i>+</i></h3>
      <p>Nulla ultrices rutrum justo, nec condimentum metus sodales at. Phasellus at lectus tortor, nec varius ligula. Suspendisse tincidunt...</p>
      </a> </li>
    <li class="thumb3"> <a href="#"><img src="images/thumb3.jpg" width="500" height="374" alt="web3canvas">
      <h3>Snore Lab<i>+</i></h3>
      <p>Donec elementum nisi eget urna egestas auctor. Praesent feugiat egestas justo eu vehicula. Pellentesque sed nisl dui. Ut non odio metus...</p>
      </a> </li>
  </ul>
</div>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
/**************Reset Style*****************/
*{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;}
body{margin:20px;padding:0;color:#666;background:#fff;font-size:13px;}
p{font-size:13px;line-height:23px;padding:3px 0 3px;}
a{text-decoration:none;color:#0084C7;font-weight:400;}
a:hover{text-decoration:underline;color:#0084C7;}
/***********PROMO STYLE*************/
#header{margin-top:50px;text-align:center;}
#header h1{font-size:24px;color:#0881f2;}
#header h2{font-size:16px;color:#333;}
/**************Showcase Style Starts*****************/
#container{margin:50px auto;width:1000px;}
.showcase{list-style:none;padding:0 0 40px 40px;height:244px;}
.showcase li{float:left;width:285px;height:244px;overflow:hidden;margin:0 13px 0 0;}
.showcase a{display:block;width:285px;height:244px;overflow:hidden;position:relative;text-decoration:none;}
.showcase a img{width:500px;height:374px;margin:0 auto;position:absolute;left:-104px;top:-40px;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;transition:all 0.2s ease-out;}
.showcase a:hover img{width:285px;height:213px;left:0;top:-10px;}
.showcase a p{background:#59A214;color:#fff;font-size:11px;padding:12px 20px;position:absolute;bottom:-100px;line-height:20px;display:block;width:245px;cursor:pointer;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;transition:all 0.2s ease-out;}
.showcase a:hover p{bottom:0;background:#3C840B;}
.showcase a h3{font-size:13px;text-transform:uppercase;color:#fff;background:#59A214;width:211px;padding:8px 10px;position:absolute;left:10px;bottom:10px;cursor:pointer;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;transition:all 0.2s ease-out;}
.showcase a:hover h3{bottom:94px;background:#3C840B;}
.showcase a h3 i{width:33px;height:26px;position:absolute;right:-34px;top:0;background:#59A214;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;transition:all 0.2s ease-out;font-size:18px;font-weight:normal;text-align:center;padding:6px 0 0 0;}
.showcase .thumb2 a p,.showcase .thumb2 a h3{background:#F68B28;}
.showcase .thumb2 a:hover p,.showcase .thumb2 a:hover h3{background:#F16B17;}
.showcase .thumb2 a h3 i{background:#F68B28;}
.showcase .thumb2 a:hover h3 i{background:#F16B17;}
.showcase .thumb3 a p,.showcase .thumb3 a h3{background:#0065BB;}
.showcase .thumb3 a:hover p,.showcase .thumb3 a:hover h3{background:#0046A2;}
.showcase .thumb3 a h3 i{background:#0065BB;}
.showcase .thumb3 a:hover h3 i{background:#0046A2;}

附件:下载该文件资源,减少时间成本(增值服务)