[CSS] CSS实现鼠标移入图片放大效果

CSS实现鼠标移入图片放大效果

一般在官网比较常见这种动效，当鼠标移入图片时可以看到视觉放大的效果，这里用到一个css属性object-fit: cover;

object-fit 属性

object-fitCSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

您可以通过使用object-position属性来切换被替换元素的内容对象在元素框内的对齐方式。

.activity-content-img{width: 100%;height: 100%;object-fit: cover;transition: 0.2s;}.activity-content-img:hover {transform: scale(1.1);}

鼠标移入效果如下: