CSSでポップアップ画像 - はれあめはれ

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSでポップアップ画像を表示</title>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style type="text/css">
body {
	background-color: #999;
}
#wrapper {
	margin: 20px auto;
	padding: 30px 0 0 20px;
	height: 410px;
	width: 530px;
	background-color: #666;
	border-radius: 15px;  /*CSS3*/  
        -webkit-border-radius: 15px;  /*Safari, Chrome*/  
    　 -moz-border-radius: 15px;  /*Firefox*/  
}
.block1, .block2 {
	display: inline;
	float: left;
	margin: 0 14px 0 0;
	height: 200px;
	width: 160px;
}
img {
	border: none;
	vertical-align: top;
}
.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, .photo2 a.popup {
	display: block;
	left: 0;
	top: 0;
	width: 160px;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.20);
        -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.20);
        -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.20);
}
.photo a.popup:hover .large {
	display: inline;
	position: absolute;
	left: 0;
	top: -15px;
	height: 220px;
	width: 290px;
	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: 290px;
	z-index: 1000;
}
p {
	color: #fff;
	text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="images/th01.jpg" width="160" height="140" alt=""><img src="images/01_o.jpg" wi
width="290" height="220" alt="" class="large"></a>
</div>
<p class="caption">イルミネーション1</p>
</div>
<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="images/th02.jpg" width="160" height="140" alt=""><img src="images/02_o.jpg" wi
width="290" height="220" alt="" class="large"></a>
</div>
<p class="caption">イルミネーション2</p>
</div>
<div class="block2">
<div class="photo2">
<a href="#" title="" class="popup"><img src="images/th03.jpg" width="160" height="140" alt=""><img src="images/03_o.jpg" wi
width="290" height="220" alt="" class="large2"></a>
</div>
<p class="caption">イルミネーション3</p>
</div>
<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="images/th04.jpg" width="160" height="140" alt=""><img src="images/04_o.jpg" wi
width="290" height="220" alt="" class="large"></a>
</div>
<p class="caption">イルミネーション4</p>
</div>
<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="images/th05.jpg" width="160" height="140" alt=""><img src="images/05_o.jpg" wi
width="290" height="220" alt="" class="large"></a>
</div>
<p class="caption">イルミネーション5</p>
</div>
<div class="block2">
<div class="photo2">
<a href="#" title="" class="popup"><img src="images/th06.jpg" width="160" height="140" alt=""><img src="images/06_o.jpg" wi
width="290" height="220" alt="" class="large2"></a>
</div>
<p class="caption">イルミネーション6</p>
</div>
</div>
</div>	
</body>
</html>
CSS3楽しい。