CSSのみでポップアップ

HTML構文内のclass抜けに追記
<!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">
<!--
/*追加css*/
*{
	margin:0;
	padding:0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:16px;
	line-height:1.5em;
}

body{
	margin: 10px 50px;	
}

.caption {
	margin-top:2px;
}

h1 {
	margin-left:10px;
	font-size:24px;
	color:#F33;
}

ul {
	margin:10px 30px;
}

/*少し変更css*/
#wrapper {
	padding: 30px 0 0 15px;
	height: 508px;
	width: 910px;
}

/*変更なしcss*/
.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;
}
.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;
}
-->
</style>
</head>
<body>
<h1>CSSのみでポップアップ画像を表示</h1>
<ul>
<li>サムネールはfloat</li>
<li>サムネールの上にアンカー「a」時点で、サムネールの左上原点で「１px」に設定したポップアップ画像を、positionで配置する</li>
<li>マウスオーバー「a:hover」の時点で、元の大きさが表示されるように設定する</li>
<li>外囲みに限定されることに注意（はみ出ると切れて見えない状態になります）</li>
</ul>
<div id="wrapper">
<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/thum01.png" width="160" height="138" alt="" /><img src="img/01_over.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">01キャプション</p>
</div>
<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/thum03.png" width="160" height="138" alt=""  /><img src="img/03_over.jpg" width="285" height="220" alt="" class="large"  /></a>
</div> 
<p class="caption">03キャプション</p>
</div>
<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/thum05.png" width="160" height="138" alt="" /><img src="img/05_over.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">05キャプション</p>
</div>
<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/thum07.png" width="160" height="138" alt=""  /><img src="img/07_over.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">07キャプション</p>
</div> 
<div class="block2">
<div class="photo2">
<a href="#" title="" class="popup"><img src="img/thum09.png" width="160" height="138" alt="" /><img src="img/09_over.jpg" width="285" height="220" alt="" class="large2" /></a>
</div>
<p class="caption">09キャプション</p>
</div>
<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/thum02.png" width="160" height="138" alt="" /><img src="img/02_over.jpg" width="285" height="220" alt="" class="large" /></a>
</div> 
<p class="caption">02キャプション</p>
</div>
<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/thum04.png" width="160" height="138" alt="" /><img src="img/04_over.jpg" width="285" height="220" alt="" class="large" /></a>
</div>  
<p class="caption">04キャプション</p>
</div>
<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/thum06.png" width="160" height="138" alt="" /><img src="img/06_over.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">06キャプション</p>
</div>
<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/thum08.png" width="160" height="138" alt="" /><img src="img/08_over.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">08キャプション</p>
</div>
<div class="block2">
<div class="photo2">
<a href="#" title="" class="popup"><img src="img/thum10.png" width="160" height="138" alt=""  /><img src="img/10_over.jpg" width="285" height="220" alt="" class="large2" /></a>
</div> 
<p class="caption">10キャプション</p>
</div> 
</div>
</div>
</body>
</html>