CSSのみでポップアップ画像を表示

HTML CSS

-SAMPLE-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<title>CSSでポップアップ画像を表示</title>
<style type="text/css">
<!--
#wrapper {
	margin: 50px;
	padding: 30px 0 0 15px;
	height: 508px;
	width: 910px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:12px;
}
.block1,
.block2 {
	display: inline;
	float: left;
	margin: 0 14px 0 0;
	height: 197px;
	width: 160px;
}
img {
	border: none;
}
.photo, .photo2 {
	position: relative;
	top: 0;
	left: 0;
	width: 160px;
}
.photo a .large {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	width: 1px;
	z-index: -10;
}
.photo a.popup,
.photo a.popup:visited {
	display: block;
	left: 0;
	top: 0;
	width: 160px;
}
.photo a.popup:hover {
	background-color: #fff;
}
.photo a.popup:hover .large {
	display: inline;
	position: absolute;
	left: 0;
	top: -15px;
	height: 220px;
	width: 285px;
	z-index: 100;
}
.photo2 a img.large2 {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	width: 1px;
}
.photo2 a.popup:hover .large2 {
	display: block;
	position: absolute;
	left: -125px;
	top: -15px;
	height: 220px;
	width: 285px;
	z-index: 1000;
}
/*IE6 7*/
/*↓これを入れないとIE6,7Sでポップアップしないらしい*/
.photo a.popup:hover {
	background-color: #fff;
}
-->
</style>
</head>
<body>
<div id="wrapper">

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/01.jpg" width="160" height="138" alt="" /><img src="img/01.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">Temperate Rainforest Olympic</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/02.jpg" width="160" height="138" alt="" /><img src="img/02.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">Close-Up of Moth on Tree Bark Mont-Saint-Bruno</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/03.jpg" width="160" height="138" alt="" /><img src="img/03.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">Koke</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/04.jpg" width="160" height="138" alt="" /><img src="img/04.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">Understory plants in rainforest</p>
</div>

<div class="block2">
<div class="photo2">
<a href="#" title="" class="popup"><img src="img/05.jpg" width="160" height="138" alt="" /><img src="img/05.jpg" width="285" height="220" alt="" class="large2" /></a>
</div>
<p class="caption">Leaf</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/06.jpg" width="160" height="138" alt="" /><img src="img/06.jpg" width="285" height="220" alt="" class="large" /></a>
</div> 
<p class="caption">Clover</p>
</div>

<div class="block1">
<div class="photo">
<a href="shop/index.html#remontop2" title="" class="popup"><img src="img/07.jpg" width="160" height="138" alt="" /><img src="img/07.jpg" width="285" height="220" alt="" class="large" /></a>
</div>  
<p class="caption">Trillium Lyndeshores Conservation Area</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/08.jpg" width="160" height="138" alt="" /><img src="img/08.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">Close-Up of Foliage </p>
</div>

<div class="block1">
<div class="photo">
<a href="shop/index.html#kakitop2" title="" class="popup"><img src="img/09.jpg" width="160" height="138" alt="" /><img src="img/09.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">sunagoke</p>
</div>

<div class="block2">
<div class="photo2">
<a href="#" title="" class="popup"><img src="img/10.jpg" width="160" height="138" alt="" /><img src="img/10.jpg" width="285" height="220" alt="" class="large2" /></a>
</div> 

<p class="caption">Cress</p>
</div> 
</div>
</div>
</body>
</html>