丸い画像をtransitionでフワッと大きくさせたかった

言葉で伝えるのが難しいので画像を使うと、
カーソルをあわせた時、このようなエフェクトがフワッとかかるようにしたかった。

検証環境はchromeです。

最初の実装

丸い <div> の背景に画像を指定して、
背景画像の大きさを変えてみる。

HTML

<div class="image"></div>

css

.image {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background-image: url('/path/to/image.png');
  background-size: 100%;
  background-position: center;
  transition: 0.2s; /* これでフワッとするはず */
}

.image:hover {
  background-size: 110%;
}

結果

大きくはなったけど、フワッとしてくれなかった。（アニメーションしなかった。）
background-size には transition が効かない…？

追記
コメントで頂いたのですが、普通はこちらのコードで問題なく動くようです。
なんで動かなかったんだろう…　私と同じようにうまくいかなかった方は以下をどうぞ。

2番目の実装

丸い <div> の中に <img> をいれて、
<img> のほうを拡大してみる。

HTML

<div class="image">
  <img src="/path/to/image.png" />
</div>

css

.image {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  overflow: hidden; /* これを書かないと四角くなる */
}

.image img {
  transition: 0.2s; /* これでフワッとするはず */
  width: 100%;
}

.image img:hover {
  transform: scale(1.1); /* scaleを使って拡大 */
}

結果

拡大のアニメーションの最中に丸くない画像がチラついた。
transition 中に overflow: hidden がうまく動いていないらしい。
とても困ったのでググった。

解決策

ここに書いてあった。
http://stackoverflow.com/questions/16687023/bug-with-transform-scale-and-overflow-hidden-in-chrome

HTML

<div class="image">
  <img src="/path/to/image.png" />
</div>

css

.image {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  overflow: hidden;

  position: relative; /* absoluteとかでも可、z-indexを効かせるため */
  z-index: 2; /* 指定されてれば良いらしい。適当な数字で */
}

.image img {
  transition: 0.2s;
  width: 100%;
}

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

結果

成功した。やったぜ。
他の解決策を知っている人がいたらおしえてください。
背景画像拡大の方でできれば、コードがスッキリしていいんだけどなあ。