鼠标移上去会进行一个平移并切换图片的效果

首先，为了能明显的看出来平移以后的距离，我们设置一个边框，把需要做出效果的div放入里面；先设置边框的div左右居中，上边距为100px，高为500px，宽800px，然后设置边框10px，样式设为一个好看一点的蓝色边框，边框设置完以后，我们再给包裹的div设置左右居中，上边距为50px，使它在边框里面上下左右都居中，再给它的宽高都设为400px，再放一个背景图片，然后再设置一下圆角为100%，并且给它一个5px蓝色的阴影效果，让它看起来像一面镜子，
效果截图：

完成这一步以后，我们给它一个伪类，然后一张设置你移动以后想要切换的图片，并且调动一下那张图片的位置，以免看不到完整的图片，再给它设置让右平移100px的距离，再给它移动的一个时间，这样就能清楚的看到平移的过程，：

完整的代码截图：

全部都设置完成以后，我们就可以实现效果了，当我们把鼠标放到图片上时，图片就会自动向右边平移100px,并且在平移的过程中切换成你放的那张图片：

移动以后的效果截图：

从截图中我们可以看到，图片很明显的向右平移了，并且还切换了图片（此时还没完全平移完成，所以还可以看到原来图片的残影）