画像を拡大せずにFacebookタイムライン画像をマウスオーバーオーバーズームエフェクトに再現するにはどうすればよいですか？

Question

数ヶ月ほどの間、Facebookは素晴らしい小さな微妙な余分なデザイン機能を持っています。タイムラインをブラウズしていて、要件に合った画像にカーソルを合わせると、わずかに（おそらく2％程度）ズームされますが、画像のサイズは変わりません。イメージが透明なウィンドウの後ろにあるかのようです。

これは愚かな質問かもしれませんが、私はこの振る舞いを再現する方法を考えることはできません。あなたは知っていますか？

Answer 1

私のFacebookには効果が見当たらないので、どういう意味なのか分かりません。しかし、あなたの説明から判断すると、私はあなたが望むと思うものの例を作りました。

Jsfiddle

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

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

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

<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>