XHTMLソース

<p class="zoom"><a href="#"><img src="share/images/photo.jpg" alt="写真" /></a></p>
<p>
 JavaScriptを使わずともCSSの:hover擬似クラスを利用して画像拡大効果を再現できる。
 拡大した時にpositionプロパティを使って指定するのでレイアウトが崩れることはない。
 尚、a要素に対して:hover擬似クラスを指定しているのは、IE6などのブラウザでは
 a要素に対してのみ:hover擬似クラスが有効なためである。
<p>

CSSソース

/* ----- サムネイル表示 ----- */
img {
     border: none;
}
p.zoom {
     position: relative;
     width: 80px;
     height: 50px;
}
p.zoom a,
p.zoom a:visited {
     position: absolute;
     display: block;
     width: 80px;
     height: 50px;
}
p.zoom a img {
     width: 80px;
     height: 50px;
}
 
/* ----- マウスオーバーによる拡大表示----- */
p.zoom a:hover {
     position: absolute;
     width: 320px;
     height: 200px;
}
p.zoom a:hover img {
     position: absolute;
     top: 0;
     left: 0;
     width: 320px;
     height: 200px;
}

• 第5章 実践的なCSSデザインの法則