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

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

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

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

HTML

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

CSS

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

解決済

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

azuno_mix
azuno_mix

総合スコア71

Webサイト

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

HTML

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

CSS

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

1回答

2リアクション

7クリップ

9919閲覧

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

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

css

.img-block { width: 150px; height: 150px; overflow: hidden; border-radius: 50%; border: 10px solid #CCC; } .img-block img { width: 150px; height: 150px; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .img-block:hover img { -webkit-transform: scale(1.3); transform: scale(1.3); }

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

  • Chromeで表示

Fukamiさんの方法

html

<div class="img-block"> <div class="img-1"></div> </div>

css

.img-block { width: 150px; height: 150px; overflow: hidden; border-radius: 50%; border: 10px solid #CCC; } .img-1 { width: 150px; height: 150px; background:url(../img/sample.jpg); background-size: 150px; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .img-1:hover { background-size: 200px; }

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

css

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

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

  • chromeで表示

Fukamiさんの方法2

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

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

  • Chromeで表示

chrome成功例

html

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

css

.img-block { width:150px; height:150px; border-radius:50%; border: 10px solid #CCC; position:relative; overflow:hidden; z-index:1; } .img-block > img { width: 150px; height: 150px; -webkit-transform: scale(1); transform: scale(1); -webkit-transition:all .2s ease; transition:all .2s ease; } .img-block:hover img{ -webkit-transform:scale(1.2); transform:scale(1.2); }

親要素のimg-blockを、

  • position:relative
  • z-indexを指定

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

haribou, k_fujimoto👍を押しています

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Webサイト

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

HTML

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

CSS

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