今天看到哔哩哔哩图片站的图片hover效果,看了下f12,写了个demo。
codepen代码如下 https://codepen.io/bhaltair/pen/zPOxry
原理是:
利用图片容器设置transform: scale(1.1),并且设置transition: transform 0.5s;
外层容器设置定宽和定高,overflow:hidden
外层容器hover的时候设置图片容器scale就可以实现我们的效果了