CSS实现照片在边框内偏移，鼠标移到图片上，图片偏移回到边框中

实现的效果：

鼠标还没移上去的时候：

 

鼠标移上去：

 

代码部分：

首先现将一个DIV把图片包起来

DIV固定宽高 加上边框 

图片宽高百分百填充

在原来的图片样式上 设置偏移translate(x,y)  这时候x=20 Y=20 代表向X轴方向偏移20PX 向Y轴方向偏移20px 到这里 就实现了照片偏移

接下来 给照片设置一个伪类  当鼠标移动的时候 设置不偏移  transform: none;

这样就实现了偏移功能，是不是很简单呢，动手试试看，如果觉得不错 欢迎点赞打赏哦！