CSSによって丸くした要素の中に置いた画像をhoverで拡大させる方法

現在、CSSを使って、丸い要素を用意しその中に正方形の画像を配置し、その画像をhoverで拡大させるというWEBデザインを実装しようとしています。

CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト

上記のサイトの１つ目のZoom-Inを使って実装しようとしたのですが、

FireFoxとInternetExplorerで表示した場合

うまくズームできています。

Chromeで表示した場合

hoverの動作中にimgの画像が前面に出てきてしまっています。一時的にoverflowを無視するような形になっているのでしょうか。

z-indexを指定するなどしてみたのですが、うまくいきませんでした。
どのようにすれば、chromeでも正常に動くのでしょうか？
アドバイスなど頂けると嬉しいです。
よろしくお願いします。

以下、コードです。

html
1<div class="img-block"><img src="img/sample.jpg"/></div>

css
1.img-block {
2	width: 150px;
3	height: 150px;
4	overflow: hidden;
5	border-radius: 50%;
6	border: 10px solid #CCC;
7}
8
9.img-block img {	
10	width: 150px;
11	height: 150px;
12	-webkit-transform: scale(1);
13	transform: scale(1);
14	-webkit-transition: .3s ease-in-out;
15	transition: .3s ease-in-out;
16}
17
18.img-block:hover img {
19	-webkit-transform: scale(1.3);
20	transform: scale(1.3);
21}

##追記(1) MasakazuFukamiさんの方法
background-imageを操作する方法です。
こういった方法もあるんですね。大変勉強になります。

Chromeで表示

html
1<div class="img-block">
2    <div class="img-1"></div>
3</div>

css
1
2.img-block {
3	width: 150px;
4	height: 150px;
5	overflow: hidden;
6	border-radius: 50%;
7	border: 10px solid #CCC;
8}
9
10.img-1 {    
11    width: 150px;
12    height: 150px;
13    background:url(../img/sample.jpg);
14    background-size: 150px;
15    -webkit-transition: .3s ease-in-out;
16    transition: .3s ease-in-out;
17}
18
19.img-1:hover {
20    background-size: 200px;
21}

また、中心にスケールさせる方法もご教示頂きました。
img-1:hoverに追記する形で

css
1.img-1:hover {
2    background-size: 200px;
3    background-position: 50%;
4}

とすると、中心にぬるっとスケールするバージョンもできました。

chromeで表示

##追記(2) 正常に実装できました

色々試してみたのですが以下のコードで狙った動作をChromeでも実装できました！

Chromeで表示

html
1<div class="img-block"><img src="img/sample.jpg"></div>

css
1.img-block {
2	width:150px;
3	height:150px;
4	border-radius:50%;
5	border: 10px solid #CCC;
6
7	position:relative;
8	overflow:hidden;
9	z-index:1;
10}
11
12.img-block > img {
13	width: 150px;
14	height: 150px;
15	-webkit-transform: scale(1);
16	transform: scale(1);
17	-webkit-transition:all .2s ease;
18	transition:all .2s ease;
19}
20
21.img-block:hover img{
22	-webkit-transform:scale(1.2);
23	transform:scale(1.2);
24}

親要素のimg-blockを、

position:relative
z-indexを指定

する必要があったようです!

行動規範の内容に同意します

回答1件

ベストアンサー

んーーーchrome独自のバグですね(´；ω；｀)

それも調べて見ようと思いますが、
background-imageでやる方法もありますよ！（画像は全て正方形にする必要があるかもしれませんが）

css
1.img-block img {    
2    width: 150px;
3    width: 150px;
4    background:url(img/sample.jp（ここはimgのパスを指定）);
5    background-size: 150px;
6    -webkit-transition: .3s ease-in-out;
7    transition: .3s ease-in-out;
8}
9
10.img-block:hover img {
11    background-size: 200px;
12}