CSS で画像を拡大表示させる

• CSS で画像ポップアップ

• 

私の中ではかなりの革命です。なぜ今までこれに気が付かなかったのか。きっとIEのhoverに対する実装が甘かったせいかもしれません。なにか 本家 とはCSSの書き方や画像の表示のさせ方が違いますが、一応動作しているので細かい詰めの部分は後で考えようと思います。表示させる場所や、拡大した後の周りのレイアウトの崩れを気にしないのならばpositionによる細かい指定は不要のようです（私はこちらの方が好み）。クロスブラウザかどうかはわかりませんが、閲覧想定環境 では意図通りに動作しているので良しとします。

追記（2005年11月24日01時10分）

何の影響なのか定かではありませんが、Firefox1.0.7では上手く動かなくなりました。

お気付きの通り、画像の大きさに関する指定はCSSで一括してしまっているので、画像毎に大きさを変えたい場合は不便です（その都度class指定を加えて行けばできますが。画像の大きさを指定するだけの別のCSSファイルを用意してみても良いかもしれません）。しかも代替縮小画像を用意せずに大きな画像を縮小して表示しているのでファイルサイズが大きな画像の場合は注意が必要です。しかし何かの画像付きのチュートリアルや、サムネイルを並べて写真を展示する場合など、画像の大きさが一定でも構わない場合などでは使い道があるのではないでしょうか。私には目からウロコでした。

ちなみにこの方法で最低限必要なのは以下の記述だけです。

a:hover
{
	background-color: 適当な背景色（transparentだと駄目みたい）;
}
a:hover img
{
	width:拡大時の横幅;
	height:拡大時の縦幅;
}
<p><a href="パス"><img src="画像パス" alt="代替" width="最初の横幅" height="最初の縦幅" /></a></p>

説明すると、a:hoverに対する背景色の指定はIEできちんと動作させる為に必要なのだそうです。最初に表示させておく画像の大きさもCSSで指定してしまう事も出来ますが、CSSをオフにした時の事や、class指定を用いて複数の指定をする場合には不便なので画像の属性として直接指定した方が得策なようです。そして親要素やa要素、もしくはimg要素にclass指定を用いる事によって、a:hover img.photo などのセレクタに width:拡大時の横幅; height:拡大時の縦幅; を新たに指定してやれば、拡大後の大きさも個別に指定できます。