鼠标经过容器放大--css3 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="container">
    <ul class="clearfix">
        <li>
            <img src="images/xy_52.jpg" alt=""/>
        </li>
        <li>
            <h5>我是标题</h5>
            <p>我是好人我是好人我是好人我是好人我是好人我是好人</p>
        </li>
    </ul>
</div>
</body>
</html>
html
        *{margin:0;padding:0;}
        .clearfix{zoom:1;}
        .clearfix:after{content:".";display:block;width:0;height:0;visibility:hidden;clear:both;}
        .container{width:600px;margin:20px auto;}
        ul{list-style:none;width:200px;background:red}
        ul li{float:left;width:100px;height:100px;transition:all 1s linear 0;background:green;}
        ul li:hover{transform:scale(1.2);background:yellow;}
        ul li:hover p,ul li:hover h5{color:#fff;}
        li img{border:0;width:100%;}
        h5{height:30px;line-height:30px;}
        h5,p{font-size:12px;padding:0 6px;}
        p{height:70px;}
css

 

posted @ 2016-08-08 16:14  dongxiaolei  阅读(128)  评论(0)  编辑  收藏  举报