CSSだけで作るマウスオーバーでの画像の拡大

カテゴリ：初心者向け 2009年1月13日 21:13

今回は「CSS だけで作るシリーズ」です。

タイトル通り、CSS だけで作るマウスオーバーによる画像拡大です。
どうやら、これから説明する方法だと IE だとクリックが正常に動かなくなるみたいです・・。

ただ、画像の拡大がメインなのでそもそもリンクしないかな、と思ってとりあえずアップしてみました。nということで、デモは以下の通り。

CSSだけで作るマウスオーバーで画像の拡大デモ

http://css-eblog.com/eblog_sample/0901/css-only-zoom/

▼EntryMore▼

HTML ソース

CSS ソース

テクニック詳細

内容はいたってシンプル。
サムネイル画像と拡大後（実際に見せたいサイズ）の画像を用意します。

それらを、ひとつの a タグ内に配置し、それぞれ span 要素でくくります。
（span でくくっているのは、キャプションなどの画像以外の要素がある場合のためなので、画像だけであれば span 要素をはずして、img タグ自体にクラスを指定しても大丈夫です）

そして、 mainImageとつけられた要素を非表示にし、a:hover 時のみ表示するように指定します。（#imgHover ul li a:hover .mainImageがその部分です）

もうひとつ大事なことは、a:hover 時に動的に position を relativeにすることです。
これを行わないと、IE6 では画像自体が表示されず、IE7 でも画像が次の画像の下にもぐりこんでしまう、ということが発生します。

そのため、#imgHover ul li a:hoverのposition: relativeが必要になります。
そして、hover 時に mainImage の class 名がついた要素の display を blockにしつつ、さらに絶対配置に変更し、top、left ともに 0（a 要素の左上に配置）にします。

動的に a 要素がposition: relativeになっているので、a 要素が基準となり、サムネイル画像の上に拡大画像が表示される、というわけです。

合わせて読むと役に立つかもなエントリー

この記事のカテゴリー一覧を見る⇒初心者向け

パーマリンク
コメント(8)
トラックバック(0)

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/113

1 - larkman さん

どうも、覚えて頂いてるでしょうか？n実は以前に参考にさせて頂いてからブックマークして何度かお邪魔しておりました。n参考になるものは無いか？と暇を見つけては色々なサイト等を見て回るのですが直感的に、「この紹介されてるサンプルを別の事に応用出来る！」とかn発想しやすいサイトは、なかなか見当たらず（自分のレベルを踏まえての話しです。）nえどさんのサイト（ブログ）の常連になりつつあります。...と言うよりn入りびたりかもしれません。

2009年1月14日 02:23

2 - えどさん

>>1 - larkman さん以前、異なるサイズの画像を・・でコメントいただきましたよね。n正直、こんなにうれしいコメントをもらったのは初めてです・・。nこんなことできるんだ！という発見をしてもらいな、と思ってこのブログを書いているので、そういうふうに参考にしてもらえたことがn本当にうれしいです。nこれからも、そういった参考になる記事を書いていきたいと思っています(*'-')コメントありがとうございました！

2009年1月14日 09:42

3 - あいさん

はじめまして。n写真掲載用にこちらの方法を使わせていただきましたが、の締めの後ろに文字を入れると画像の横が空いているためかそちらに行ってしまいます。nの後に改行を入れても、違うdiv要素を入れても改行の意味を成しません。nこれはわたしのパソコンのバグでしょうか？教えていただけると嬉しいです…

2009年2月17日 01:19

4 - えどさん

>>3 - あいさんコメントありがとうございます。nえぇと、もう少し状況を詳しく教えてもらえますか？nタグを書かれたのか、ちょっと文章が途切れている感じなので・・。nタグのカッコを外して、span、などのように書いてもらうと消えずに済むと思います。nちなみに、画像拡大後に文字を表示したい、ということでしょうか？n

2009年2月17日 01:41

5 - GOGO さん

初めまして、CSSの勉強と思って色んな所を検索して見ながら辿り着きました。n自分が理解出来ていないブラウザごとのCSSの設定？がここで勉強出来そうなのでブックマークしてまた寄らせてもらいます。n凄くためになりました！ありがとうございます！！

2010年1月27日 13:39

6 - えどさん

>>5 - GOGOさん
コメントありがとうございます！
CSS を始めた人とかに分かりやすく解説する、といのがコンセプトなので
お役に立てたら幸いです(*'-')ぜひぜひ参考にしてみてください！

2010年1月27日 13:58

7 - 匿名さん

ソース部分が見にくい

2010年6月28日 17:01

8 - えどさん

コメント・ご指摘ありがとうございます！
ソースなどの部分ですが、MT5に移行した際に、
記事内容がちょっとおかしくなってしまっています・・。
随時修正はしているのですが、ところどころおかしいところがあります・・。
申し訳ないです。

2010年7月 4日 00:20