CSS で画像ポップアップ

JavaScript を使わずに、CSS を使ってサムネール画像の拡大画像をマウスオーバーで表示せる方法「CSS ~ Image Pop UP」を参考に、拡大画像をその場で表示させるサンプルを作ってみた。

最初に拡大画像を高さ 1px 幅 1px に指定しておき、hover で正寸を指定させることによって実現させている。ちなみに、hover の指定に背景色を指定しないと IE でうまく動作しない。

.photo a.popup:hover {
        background-color: #fff;
}

何となく微妙な感じだけど、サムネールをいっぱい並べて画面遷移なしで拡大画像をみせたい場合に使えるかも。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/147

あの頃のように… - CSS で画像ポップアップさせる (2005年6月10日 19:02)

CSS で画像ポップアップ私の中ではかなりの革命です。なぜ今までこれに気が付かなかったのか。きっとIEのhoverに対する実装が甘かったせいかもしれません。なに... 続きを読む

いつでもどこでも〜まったりん〜 - CSSで画像を拡大 (2005年6月17日 02:01)

CSS(カスケーディング・スタイル・シート)で画像を拡大ポップアップ(したかのように)見せる技があるそうだ。画像の上にマウスポインタを置くだけでよい。 こ... 続きを読む

あのにらぼrev.2 - CSSだけで画像ポップアップ (2005年6月17日 10:41)

JavaScriptを使わずにCSSだけで画像ポップアップできるらしい。HTMLソース見てみると目から鱗でした。これカーソルを乗せたときに表示する内容を変更する... 続きを読む

a i r t r a i n - [web]Lucky bag::blog: CSS で画像ポップアップ (2005年6月17日 15:19)

驚愕!上記サイトを参考に(というかまんま持ってきて若干簡略化しただけですが…)。よくこんなん思いつくなぁ。こんなことができるとは思わなかった。([http://... 続きを読む

PukiWiki/TrackBack 0.1 - Web Design (2005年6月17日 18:50)

Web Design Project 2005 情報統計部では他の神戸大学のクラブ・サークルに対してウェブサイト製作についての 相談を請け負っています。ホ... 続きを読む

じっぷろぐ - CSS で画像ポップアップ (2005年6月18日 12:30)

http://www.lucky-bag.com/archives/2005/06/css_popup.html サムネイル画像にマウスオーバーしたときに拡大... 続きを読む

trashcan+green (beta) - [web]「CSSで画像ポップアップ」を画像1枚でやってみる (2005年6月19日 01:25)

http://www.lucky-bag.com/archives/2005/06/css_popup.html a要素にしか:hoverが効かないIE用に... 続きを読む

Super::User - スタイルシートでイメージポップアップ (2005年6月20日 16:38)

スタイルシートでこんな事が出来るシリーズその2 http://moneytreesystems... 続きを読む

月刊葉月日記 - CSS で画像ポップアップ (2005年6月29日 21:24)

Lucky bag::blog: CSS で画像ポップアップ  目から鱗って奴で... 続きを読む

テクなしBLOG - CSSで画像をポップアップさせてみる (2005年7月 3日 14:24)

Javascriptなんかを使わずに、画像をポップアップっぽくみせる方法。 ... 続きを読む

Ceekz Logs - マウスオーバーで拡大 (2005年9月19日 03:05)

1週間ほど前から、右下に日記に乗せた画像を表示するようにしていたのですが、この度、マウスオーバーで画像を拡大表示するようになりました。 単に、マウスを当てると... 続きを読む

贋SEの現実逃避 - ブログカスタマイズ@試行錯誤 (2005年10月16日 12:55)

そろそろ自分でブログデザインをしたくなってきたので、ちょこちょこいじってみることに・・・。 †カスタマイズしやすそうなテンプレートを選ぶ。 3カラムでシ... 続きを読む

peaceman1984の日記 - [日記]「はてな」はやっぱりすごい会社だ。 (2005年12月10日 22:17)

 こっそりと文句を言ったからかどうかは知らないけど、はてなカウンターが前と同じく月ごとのアクセス数も解析できるようになってた。やっぱりはてなの技術力はスゲ... 続きを読む

あまなつ日記 - リンクテキストから画像がポップアップするAdhoverをはじめます (2006年2月15日 20:42)

以前からテキストでAmazonの商品を紹介するようにもしたいなぁと考えてまして、... 続きを読む

1yard - CSSによる画像ポップアップ (2006年4月 8日 21:15)

Lightbox JSとか前々から試してみたいと思ってたんですが、JavascriptをFTPでアップしたりとか、ちょっとウザ。 そういや、CSSで... 続きを読む

パソコンのツボ ~Office のTIP - CSSで画像のポップアップ (2006年6月 2日 13:24)

CSSでポップアップ。こんな方法もあったんだ?と思いつつさっそく、JavaScriptから乗り換えようかと... 続きを読む

Luv Design - 画像のポップアップを行う -1 css編 (2008年5月15日 00:39)

Javascriptを使わず、cssだけで画像のポップアップを行う方法です。 すごく手軽に気軽にできます。 今回は「a:hover」を利用します。... 続きを読む

ここまで来たら止められないよ~アフィリエイト! - CSSで画像ポップアップにチャレンジ (2008年5月28日 15:25)

写真をクリックせずにマウスオーバーしただけで大きく表示されるというタグにチャレンジしてみました。 参考にしたサイトは、CSS で画像ポップアップ ... 続きを読む

さあもん写心館(FC2分館) - ちょっとテスト (2008年7月 6日 00:55)

img { border: none; } .photo { position: relative; } .photo a .la... 続きを読む

Comments

rara said:

自分でもやってみました。ただ画像を複数横に並べたいのとあと重なった時に下の画像が見えてしまうのですが・・・

e-luck said:

複数並べると言うことであれば、下記の所を参考にしてみてはいかがでしょうか。
http://host.sonspring.com/hoverbox/

高山 said:

画像を複数横に並べたいのとあと重なった時に下の画像が見えてしまうのを改善したいのですが、初心者なのでもっとわかりやすく教えて下さい。
よろしくお願い致します。