transsition으로 원의 그림을 한꺼번에 확대하고 싶어요.

말로 표현하기 어려우니까 그림으로 하면
커서가 제시간에 맞으면 이런 효과를 가볍게 위에 걸고 싶다.

환경이 크롬인지 확인합니다.

첫번째 실현

원형<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에 효과가 없는데...?
추기
댓글이 달렸지만 보통 이쪽 코드로 정상적으로 작동합니다.
왜 움직이지 않았을까... 나처럼 제대로 진행되지 못한 사람은 다음 몇 가지를 선택해 주세요.

제2의 실현

원형transition에 첨가<div><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を使って拡大 */
}

결실

확대된 애니메이션에 동그랗지 않은 그림이 있습니다.<img> 중transition은 순조롭게 돌아가지 않는 것 같다.
곤란해서 불평을 늘어놓았다.

해결책

여기 써 있어요.
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);
}

결실

성공했어.잘 됐다.
다른 해결책을 아는 사람이 있으면 알려주세요.
배경 그림을 확대할 수 있다면 코드가 원활했으면 좋겠다.