質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

11591閲覧

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

azuno_mix

総合スコア71

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2グッド

7クリップ

投稿2015/09/03 16:15

編集2015/09/06 15:30

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

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

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

  • FireFoxとInternetExplorerで表示した場合

firefox

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

  • Chromeで表示した場合

chrome ver

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で表示

Fukamiさんの方法

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で表示

Fukamiさんの方法2

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

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

  • 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を指定

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

haribou, k_fujimoto👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

んーーー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}

みたいにしてはいかがでしょうか

投稿2015/09/04 03:47

MasakazuFukami

総合スコア1869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

azuno_mix

2015/09/05 01:32

background-imageで解決する方法の提案、大変参考になりました!(メモりました) とてもシンプルで分かりやすい実装方法だなと思いました。 ご回答ありがとうございました!
MasakazuFukami

2015/09/05 01:59

いえ! ちなみにbackground-imageとbackground-position:50%;を指定すると真ん中を中心にスケールすることができますね! なにより解決して良かったです!
azuno_mix

2015/09/06 15:33

中心にスケールする方法、気になってました! 何度もご教示していただき、ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問