CSSで画像を拡大表示

説明

JavaScriptを利用せずに画像を拡大表示する為の方法です。擬似要素である :hover を用いて width height で拡大値を指定してやります。拡大前の画像は元となる画像を小さく表示しているだけなので代替画像を使用するのと比べて容量が大きくなります。

最低限必要な記述

CSS

a:hover
{
	background-color: 適当な背景色（transparentだと駄目みたい）;
}
a:hover img
{
	width:拡大時の横幅;
	height:拡大時の縦幅;
}

HTML

<p><a href="パス"><img src="画像パス" alt="代替" width="最初の横幅" height="最初の縦幅" /></a></p>

実行例

スペシャルサンクス

参考アイディア

• CSS で画像ポップアップ

写真提供

• 東京発フリー写真素材集

備考

画像の大きさが均一の時は楽ですが、そうでない場合は、その大きさ毎にclass指定などを用いて拡大値を変更しなければならないので手間です。

関連リソース

• CSSで画像をポップアップ（アクティブバージョン）
• CSS で画像を拡大表示させる＠あの頃のように…