<p>【鼠標移動進去圖片放大一倍效果：運用了-webkit-transform:scale(1.04)效果】</p>
如圖：鼠標移動上去的時候圖片放大一倍的效果，
<!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>無標題文檔</title> <style type="text/css"> html{color:#333;background:#f3f3f3;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;} li{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;} q:before,q:after{content:'';} abbr,acronym{border:0;font-variant:normal;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} input,textarea,select,strong{font-family:inherit;font-size:inherit;} input,textarea,select{*font-size:100%;} legend{color:#333;} .clear{height:0;font-size:0;line-height:0;clear:both; display:block;} body{font-size:12px;background-color:#f3f3f3;font-family:tahoma,verdana,arial,helvetica,sans-serif;text-align:center;color:#333; line-height:20px;} a{color:#816353;text-decoration:none;} a:hover{color:#c01313;} .clearfix{zoom:1;}.clearfix:after{content:'\0020';display:block;height:0;clear:both;} .container{ width:980px; margin:15px auto; overflow:hidden; text-align:left;} .modul{ width:1000px;} .mod_title{ font-size:22px; font-family:"Microsoft YaHei"; height:24px; line-height:24px; font-weight:bold; color:#3d3d3d; display:block; margin-bottom:15px;} .modul li{ float:left; width:313px; margin-right:20px;} .mod_show{ display:block; width:100%; background:#fff; overflow:hidden; zoom:1; margin-bottom:20px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.1);-moz-box-shadow:0 1px 0 rgba(0,0,0,.1);box-shadow:0 1px 0 rgba(0,0,0,.1); position:relative;} .mod_img{ cursor:pointer; max-width:100%; overflow:hidden; position:relative; height:190px;} .mod_img a img{ vertical-align:top;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out; max-width:100%;} .mod_img a:hover img{-webkit-transform:scale(1.04);-moz-transform:scale(1.04);transform:scale(1.04);} .mod_detail{ padding:10px; background:#fff; font-size:12px;} .mod_detail:after{ content:''; display:block; clear:both;} .mod_detail .mod_avatar{ margin-top:26px; background-color:#fff; border:1px solid #e3e3e5; padding:5px; float:right;} .mod_detail .mod_avatar img{ width:50px; height:50px; vertical-align:top;} .mod_detail .mod_tit{ font-size:16px; font-weight:400; height:18px; line-height:18px; color:#3d3d3d; padding-bottom:7px; overflow:hidden; font-family:"Microsoft YaHei";} .mod_detail .mod_info{ color:#9f9f9f; margin-bottom:8px; line-height:16px; height:32px; overflow:hidden;} .mod_detail .mod_dete .ui_light{ color:#9f9f9f;} </style> </head> <body> <div class="container"> <h3 class="mod_title">旅游設計師</h3> <ul class="modul clearfix"> <li> <div class="mod_show"> <p class="mod_img"><a href="javascript:void(0);"><img src="http://102.img.lvren.com/static/uploads/image/home_page/2014/0728/20140728095334_54846.jpg"></a></p> <div class="mod_detail"> <div class="mod_avatar"><img src="http://www.bagtree.com/themes/bagtree_2011/images/touxian.gif"></div> <div class="mod_conten"> <h3 class="mod_tit">站在歷史和地理的正確一方</h3> <div class="mod_info">愛李白愛司馬遷。閑時寫瘦金體，彈琵琶曲，還能卜梅花易。背過八大菜系的40本菜譜，去過中國的每個省，為吃去旅行的金牛女。上班干QQ旅游，總也干不好，老被老板罵</div> <div class="mod_dete">設計師：<span class="ui_light">梁寧</span></div> </div> </div> </div> </li> <li> <div class="mod_show"> <p class="mod_img"><a href="javascript:void(0);"><img src="http://102.img.lvren.com/static/uploads/image/home_page/2014/0728/20140728095334_54846.jpg"></a></p> <div class="mod_detail"> <div class="mod_avatar"><img src="http://www.bagtree.com/themes/bagtree_2011/images/touxian.gif"></div> <div class="mod_conten"> <h3 class="mod_tit">站在歷史和地理的正確一方</h3> <div class="mod_info">愛李白愛司馬遷。閑時寫瘦金體，彈琵琶曲，還能卜梅花易。背過八大菜系的40本菜譜，去過中國的每個省，為吃去旅行的金牛女。上班干QQ旅游，總也干不好，老被老板罵</div> <div class="mod_dete">設計師：<span class="ui_light">梁寧</span></div> </div> </div> </div> </li> <li> <div class="mod_show"> <p class="mod_img"><a href="javascript:void(0);"><img src="http://102.img.lvren.com/static/uploads/image/home_page/2014/0728/20140728095334_54846.jpg"></a></p> <div class="mod_detail"> <div class="mod_avatar"><img src="http://www.bagtree.com/themes/bagtree_2011/images/touxian.gif"></div> <div class="mod_conten"> <h3 class="mod_tit">站在歷史和地理的正確一方</h3> <div class="mod_info">愛李白愛司馬遷。閑時寫瘦金體，彈琵琶曲，還能卜梅花易。背過八大菜系的40本菜譜，去過中國的每個省，為吃去旅行的金牛女。上班干QQ旅游，總也干不好，老被老板罵</div> <div class="mod_dete">設計師：<span class="ui_light">梁寧</span></div> </div> </div> </div> </li> </ul> </div> </body> </html>