css图片hover放大

今天看到哔哩哔哩图片站的图片hover效果,看了下f12,写了个demo。

codepen代码如下
https://codepen.io/bhaltair/pen/zPOxry

原理是:

利用图片容器设置transform: scale(1.1),并且设置transition: transform 0.5s;

外层容器设置定宽和定高,overflow:hidden

外层容器hover的时候设置图片容器scale就可以实现我们的效果了

原文地址:https://www.cnblogs.com/bhaltair/p/css-tu-pianhover-fang-da.html