代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>缩放实例</title> <style> * { padding: 0; margin: 0; } .c { width: 1140px; margin: 50px auto 0; height: 385px; } .left { position: relative; overflow: hidden; float: left; width: 680px; height: 100%; } .right { width: 450px; float: right; height: 100%; } .right .top { overflow: hidden; position: relative; height: 188px; margin-bottom: 10px; } .right .bottom { overflow: hidden; position: relative; height: 188px; } .c img { width: 100%; height: 100%; transition: transform 0.35s linear 0s; } .borderWhite::after { content: ''; /* 公共样式 四条边界距离10px */ position: absolute; left: 10px; top: 10px; bottom: 10px; right: 10px; border:2px solid #fff; transform:scale(1.1); display: none; } /* 找伪元素 */ .left:hover:after { transform:scale(1); /* 鼠标移出没有过度 */ transition: transform 0.35s linear 0s; display: block; } .left:hover img { transform:scale(1.2); } .top:hover:after { transform:scale(1); transition: transform 0.35s linear 0s; display: block; } .top:hover img { transform:scale(1.2); } .bottom:hover:after { transform:scale(1); transition: transform 0.35s linear 0s; display: block; } .bottom:hover img { transform:scale(1.2); } </style> </head> <body> <div class="c"> <div class="left borderWhite"> <a href=""> <img src="img/qz.jpg" alt=""> </a> </div> <div class="right"> <div class="top borderWhite"> <a href=""> <img src="img/qz_1.jpg" alt=""> </a> </div> <div class="bottom borderWhite"> <a href=""> <img src="img/qz_2.jpg" alt=""> </a> </div> </div> </div> </body> </html>
效果：
由初始样式（下图）：
鼠标划入：白色边框缩放显示，图片放大显示，溢出隐藏，如下图：
