如何在不扩展图像的情况下重现Facebook时间轴图像onmouseover缩放效果？

Question

从几个月左右开始，Facebook有一个非常微小的额外设计功能。当您浏览时间轴并将鼠标悬停在图片上（符合要求）时，它会缩放一点（可能是2％左右），但不会改变图像的尺寸。好像图像在透明窗口后面。

现在这可能是一个愚蠢的问题，但我似乎无法想到重现这种行为的方法。你们都知道吗？

Answer 1

不确定你的意思，因为我无法在Facebook上找到效果。但从你的描述来看，我已经举了一个我认为你想要的例子。

Jsfiddle

＆＃13;

＆＃13;

.container {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.image {
  width: 100%;
  height: 100%;
  transition: all .2s ease-in-out;
}

.image:hover {
  transform: scale(1.1);
}

＆＃13;

<div class="container">
 <img class="image" src="https://cdn.fstoppers.com/styles/full/s3/wp-content/uploads/2014/04/fstoppers_umf_barrie3_featured.jpg">
</div>

＆＃13;

＆＃13;

＆＃13;