カテゴリ：初心者向け 2009年1月13日 21:13
今回は「CSS だけで作るシリーズ」です。
タイトル通り、CSS だけで作るマウスオーバーによる画像拡大です。
どうやら、これから説明する方法だと IE だとクリックが正常に動かなくなるみたいです・・。
ただ、画像の拡大がメインなのでそもそもリンクしないかな、と思ってとりあえずアップしてみました。 ということで、デモは以下の通り。
▼EntryMore▼
内容はいたってシンプル。
サムネイル画像と拡大後（実際に見せたいサイズ）の画像を用意します。
それらを、ひとつの 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 要素が基準となり、サムネイル画像の上に拡大画像が表示される、というわけです。
この記事のカテゴリー一覧を見る⇒初心者向け
トラックバックURL
カテゴリー
最近のエントリー
テスト的に設置してます。好きにコメントしてみてくださいｗ
©2009 CSS-EBLOG All Rights Reserved
コメント
1 - larkman さん
どうも、覚えて頂いてるでしょうか？
実は以前に参考にさせて頂いてからブックマークして何度かお邪魔しておりました。
参考になるものは無いか？と暇を見つけては色々なサイト等を見て回るのですが
直感的に、「この紹介されてるサンプルを別の事に応用出来る！」とか
発想しやすいサイトは、なかなか見当たらず（自分のレベルを踏まえての話しです。）
えどさんのサイト（ブログ）の常連になりつつあります。...と言うより
入りびたりかもしれません。
2009年1月14日 02:23
2 - えど
さん
>>1 - larkman さん
以前、異なるサイズの画像を・・でコメントいただきましたよね。
正直、こんなにうれしいコメントをもらったのは初めてです・・。
こんなことできるんだ！ という発見をしてもらいな、と思って
このブログを書いているので、そういうふうに参考にしてもらえたことが
本当にうれしいです。
これからも、そういった参考になる記事を書いていきたいと思っています(*'-')
コメントありがとうございました！
2009年1月14日 09:42
3 - あい さん
はじめまして。
写真掲載用にこちらの方法を使わせていただきましたが、の締めの後ろに文字を入れると画像の横が空いているためかそちらに行ってしまいます。
の後に改行を入れても、違うdiv要素を入れても改行の意味を成しません。
これはわたしのパソコンのバグでしょうか？教えていただけると嬉しいです…
2009年2月17日 01:19
4 - えど
さん
>>3 - あい さん
コメントありがとうございます。
えぇと、もう少し状況を詳しく教えてもらえますか？
タグを書かれたのか、ちょっと文章が途切れている感じなので・・。
タグのカッコを外して、span、などのように書いてもらうと
消えずに済むと思います。
ちなみに、画像拡大後に文字を表示したい、ということでしょうか？
2009年2月17日 01:41
5 - GOGO さん
初めまして、CSSの勉強と思って色んな所を検索して見ながら辿り着きました。
自分が理解出来ていないブラウザごとのCSSの設定？がここで勉強出来そうなのでブックマークしてまた寄らせてもらいます。
凄くためになりました！ありがとうございます！！
2010年1月27日 13:39
6 - えど
さん
>>5 - GOGOさん
コメントありがとうございます！
CSS を始めた人とかに分かりやすく解説する、といのがコンセプトなので
お役に立てたら幸いです(*'-')
ぜひぜひ参考にしてみてください！
2010年1月27日 13:58