[CSS]サムネイルのマウスオーバーで指定場所に画像を拡大表示する方法

サムネイル画像を複数並べてそのどれかにマウスを乗せると、どれに乗せても同じ場所にその画像が拡大表示される方法を探してみたところ、いろんな情報が出てきた。

ただ、できる限りシンプルにしたかったのだけど、JQUERYやJavascriptを使ったもの、無駄なコードが多いものが多かったため、以下のようにシンプルなCSSだけで実現できるようにしてみた。

↓こんな感じになる（デモページ）

マウスオーバーで別の場所に拡大画像を表示する方法

てことで、やり方は以下。

▼CSS

#overImg{position: relative;}
#overImg a .tiisai{width: 100px;}
#overImg a .ookii{display: none;}
#overImg a:hover .ookii{
	display: block;
	position: absolute;
	top: 100px;
	z-index:999;
}
#shoki{
	position: absolute;
	top: 100px;
}

▼HTML

<div id="overImg">
<span id="shoki">マウスオーバー時以外に表示する画像or文く</span>
<a><img class="tiisai" src="画像1"><img class="ookii" src="画像1"></a>
<a><img class="tiisai" src="画像2"><img class="ookii" src="画像2"></a>
<a><img class="tiisai" src="画像3"><img class="ookii" src="画像3"></a>
</div>

要は、元画像を縮小したものをサムネイルにして、マウスオーバーすると、その元画像が真下に表示されるだけの事なんだけどね。

サムネイルの大きさは「#overImg a .tiisai{width: 100px;}」の数値を変更。
真下に表示される画像の位置は、2箇所の「top: 100px;」の数値を変更すればOK。
（右に表示したけりゃ「left:400px;top:0;」とか）

ちなみに、
「マウスオーバー時以外に表示する画像or文」のところは、元画像より大きいものにしちゃうとはみ出ちゃうので、消すならJavaScript使った方が良いかも。

まあ、その必要性ってあまりないとは思うけどｗ