@charset "utf-8"; body { background-color:#F5F3F3 } h1 { text-align:center; font-size:18px } .container { background:#FF9; width:420px; height:300px; margin:0px auto; cursor:pointer; overflow:hidden; box-shadow:6px 4px 5px hsla(0,0%,59%,.2); -webkit-box-shadow:6px 4px 5px hsla(0,0%,59%,.2); } .container img { background:#FFF; display:block; width:400px; height:280px; padding:10px; float:left; -webkit-transition:0.7s; -moz-transition:0.7s; -o-transition:0.7s; } .zoom { position:absolute; -moz-transform:translate(-150px,-120px); -webkit-transform:scale(1.1) translate(-150px,-120px) skew(15deg,-30deg); -ms-transform:scale(1.1) translate(-150px,-120px) skew(15deg,-30deg); -o-transform:scale(1.1) translate(-150px,-120px) skew(15deg,-30deg); } .name { background:#FFF; width:220px; height:30px; margin:15px auto; cursor:pointer; box-shadow:2px 2px 5px #969696; /*opera或ie9*/ -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; } .name p { font:bold 24px Verdana,Geneva,sans-serif; text-align:center; line-height:30px; color:#FFF; background:#333; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; }
比较简单方便的插件 样式也比较好更改!