<!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> <style type="text/css"> body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;} ul,ol,li{list-style:none;} input,button{margin:0;font-size:12px;vertical-align:middle;} body{font-size:12px;font-family:Arial, Helvetica, sans-serif; color:#333; margin:0 auto; } table{border-collapse:collapse;border-spacing:0;} a{ color:#333; text-decoration:none;} a:hover{ text-decoration:none;} .scale{ width:420px; margin:20px auto; height:70px; } .scale li img{border:2px solid #E2E2E2;float: left;height:80px;margin-right:25px;opacity: 0.8;overflow: hidden; padding: 2px;width:90px;} .scale li:hover img{-webkit-transform:scale(1.23);-moz-transform: scale(1.23);-o-transform:scale(1.23);} </style></head> <body> <ul class="scale"> <li><a href="#"><img src="11.png"></a></li> <li><a href="#"><img src="11.png"></a></li> <li><a href="#"><img src="11.png"></a></li> </ul> </body></html>