css3鼠标移动图片上移效果 

css3的功能真是很强大，学无止境，不多说，直接上代码

css部分：
 1 <style>
 2     *{margin: 0; padding: 0;}
 3     .text-center{text-align:center}
 4     .col_cont{width:300px;height:300px;margin:auto}
 5     .thumbnail{cursor:pointer;text-decoration:none;display:block;padding:4px;height:200px;font-weight:bold;">#fff;border:1px solid #ddd; }
 6     .thumbnail img, .thumbnail h3{transition:all .5s;-webkit-transition:all .5s;-ms-transition:all .5s;}
 7     .thumbnail img{width:35%;margin-top:30px}
 8     .thumbnail h3{color:silver}
 9     .thumbnail:hover img{-webkit-transform:translateY(-20px);-moz-transform:translateY(-20px);-ms-transform:translateY(-20px);
10         -o-transform:translateY(-20px);transform:translateY(-20px)}
11     .thumbnail:hover h3{color:#2c3e50}
12 </style>

 

html部分：
<div class="col_cont">
    <a class="thumbnail text-center">
        <img src="images/service-1.png" alt="...">
        <div class="caption">
            <h3>产品介绍产品介绍</h3>
        </div>
    </a>
</div>

 

posted @ 2016-08-16 17:49  杜Amy  阅读(17958)  评论(0)  编辑  收藏  举报