<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0 auto; padding: 0; } #circle{ width: 200px; height: 300px; border: 1px solid red; border-radius: 50%; overflow: hidden; } img{ transition: 5s; } img:hover{ transform:scale(1.5,1.5); } </style> </head> <body> <div id="circle"> <img src="../../img/meinv.jpg" width="100%" height="100%"/> </div> </body> </html>
鼠标上移，图片放大，超出部分隐藏。