效果图如下:
代码:
<body> <div><img src="jd.jpg"></div> </body>
img{ width: 250px; height: 250px; transition: all 0.6s;/* 过渡效果,图片实现效果,写在图片上 */ } div{ width: 240px;/* 宽度比图片宽度少10px */ height: 250px; border: 1px solid rgb(194, 188, 188); overflow: hidden;/*图片超过部分切掉 */ } div:hover img{ margin-left: -10px;/* 鼠标经过盒子,图片向左移动10px */ }