鼠标经过容器放大--css3
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
*{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;}