■ - EGZ-Blog

<!DOCTYPE HTML>
<html lnag="ja">
<head>
<meta charset="UTF-8">
<title>cssポップメニュー</title>
<style type="text/css">
<!--
#container {
	margin: 0 auto;
	padding: 40px 0 0 15px;
	height: 600px;
	width: 890px;
	background-color:silver;
}
.block1,
.block2 {
	display: inline;
	float: left;
	margin: 0 14px 0 0;
	height: 197px;
	width: 160px;
}
img {
	border: 3px solid #333;
}
.photo, .photo2 {
	position: relative;
	top: 0;
	left: 0;
	width: 160px;
}
.photo a.popup,
.photo a.popup:visited {
	display: block;
	left: 0;
	top: 0;
	width: 160px;
}
.photo a.popup:hover {
	background-color: #fff;
}
.photo a .large {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	width: 1px;
}
.photo a.popup:hover .large {
	display: inline;
	position: absolute;
	left: 0;
	top: -40px;
	height: 220px;
	width: 285px;
	z-index: 100;
	-moz-transition-duration:0.2s;
	-webkit-transition-duration:0.2s;
	-o-transition-duration:0.2s;
	-ms-transition-duration:0.2s;
}
.photo a .large2 {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	width: 1px;
}
.photo a.popup:hover .large2 {
	display: inline;
	position: absolute;
	left: -35px;
	top: -40px;
	height: 220px;
	width: 285px;
	z-index: 100;
	-moz-transition-duration:0.2s;
	-webkit-transition-duration:0.2s;
	-o-transition-duration:0.2s;
	-ms-transition-duration:0.2s;
}
.photo a .large3 {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	width: 1px;
}
.photo a.popup:hover .large3 {
	display: inline;
	position: absolute;
	left: -65px;
	top: -40px;
	height: 220px;
	width: 285px;
	z-index: 100;
	-moz-transition-duration:0.2s;
	-webkit-transition-duration:0.2s;
	-o-transition-duration:0.2s;
	-ms-transition-duration:0.2s;
}
.photo a .large4 {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	width: 1px;
}
.photo a.popup:hover .large4 {
	display: inline;
	position: absolute;
	left: -95px;
	top: -40px;
	height: 220px;
	width: 285px;
	z-index: 100;
	-moz-transition-duration:0.2s;
	-webkit-transition-duration:0.2s;
	-o-transition-duration:0.2s;
	-ms-transition-duration:0.2s;
}
.photo a .large5 {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	width: 1px;
}
.photo a.popup:hover .large5 {
	display: inline;
	position: absolute;
	left: -125px;
	top: -40px;
	height: 220px;
	width: 285px;
	z-index: 100;
	-moz-transition-duration:0.2s;
	-webkit-transition-duration:0.2s;
	-o-transition-duration:0.2s;
	-ms-transition-duration:0.2s;
}
.caption {
	text-align: center;
	color: #fff;
	font-size: 1.0em;
	font-weight: bold;
	font-family: Verdana, Geneva, sans-serif;
}
-->
</style>
</head>

<body>
<!--container-->
<div id="container">

	<div class="block1">
		<div class="photo">
			<a href="#" title="" class="popup">
      <img src="img/kk1-1.jpg" width="160" height="138" alt="" />
      <img src="img/kk1-1.jpg" width="285" height="220" alt="" class="large" /></a>
		</div><!--photo-->
		<p class="caption">China</p>
	</div><!--block1-->
  
	<div class="block1">
		<div class="photo">
			<a href="#" title="" class="popup">
      <img src="img/kk2-2.jpg" width="160" height="138" alt=""  />
      <img src="img/kk2-2.jpg" width="285" height="220" alt="" class="large2" /></a>
		</div><!--photo--> 
		<p class="caption">Canada</p>
	</div><!--block1-->
  
	<div class="block1">
		<div class="photo">
			<a href="#" title="" class="popup">
      <img src="img/kk3-3.jpg" width="160" height="138" alt="" />
      <img src="img/kk3-3.jpg" width="285" height="220" alt="" class="large3" /></a>
		</div><!--photo-->
		<p class="caption">France</p>
	</div><!--block1-->
  
	<div class="block1">
		<div class="photo">
			<a href="#" title="" class="popup">
      <img src="img/kk4-4.jpg" width="160" height="138" alt=""  />
      <img src="img/kk4-4.jpg" width="285" height="220" alt="" class="large4" /></a>
		</div><!--photo-->
		<p class="caption">South Korea</p>
    </div><!--block1-->
    
	<div class="block1">
		<div class="photo">
			<a href="#" title="" class="popup">
      <img src="img/kk5-5.jpg" width="160" height="138" alt="" />
      <img src="img/kk5-5.jpg" width="285" height="220" alt="" class="large5" /></a>
		</div><!--photo-->
		<p class="caption">Japan</p>
	</div><!--block1-->
  
	<div class="block1">
		<div class="photo">
			<a href="#" title="" class="popup">
      <img src="img/kk6-6.png" width="160" height="138" alt=""  />
      <img src="img/kk6-6.png" width="285" height="220" alt="" class="large" /></a>
		</div><!--photo-->
		<p class="caption">Philippines</p>
	</div><!--block1-->
  
	<div class="block1">
		<div class="photo">
			<a href="#" title="" class="popup">
      <img src="img/kk7-7.jpg" width="160" height="138" alt="" />
      <img src="img/kk7-7.jpg" width="285" height="220" alt="" class="large2" /></a>
		</div><!--photo-->
		<p class="caption">Spain</p>
	</div><!--block1-->
  
	<div class="block1">
		<div class="photo">
			<a href="#" title="" class="popup">
      <img src="img/kk8-8.jpg" width="160" height="138" alt=""  />
      <img src="img/kk8-8.jpg" width="285" height="220" alt="" class="large3" /></a>
		</div><!--photo-->
		<p class="caption">Finland</p>
	</div><!--block1-->
  
	<div class="block1">
		<div class="photo">
			<a href="#" title="" class="popup">
      <img src="img/kk9-9.png" width="160" height="138" alt="" />
      <img src="img/kk9-9.png" width="285" height="220" alt="" class="large4" /></a>
		</div><!--photo-->
		<p class="caption">India</p>
	</div><!--block1-->

	<div class="block1">
		<div class="photo">
			<a href="#" title="" class="popup">
      <img src="img/kk10-10.jpg" width="160" height="138" alt=""  />
      <img src="img/kk10-10.jpg" width="285" height="220" alt="" class="large5" /></a>
		</div><!--photo--> 
		<p class="caption">Jamaica</p>
	</div><!--block1-->

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

	<div class="block1">
		<div class="photo">
			<a href="#" title="" class="popup">
      <img src="img/kk12-12.jpg" width="160" height="138" alt=""  />
      <img src="img/kk12-12.jpg" width="285" height="220" alt="" class="large2" /></a>
		</div>
		<p class="caption">Switzerland</p>
	</div>

	<div class="block1">
		<div class="photo">
			<a href="#" title="" class="popup">
      <img src="img/kk13-13.jpg" width="160" height="138" alt="" />
      <img src="img/kk13-13.jpg" width="285" height="220" alt="" class="large3" /></a>
		</div>
		<p class="caption">Afghanistan</p>
	</div>

	<div class="block1">
		<div class="photo">
			<a href="#" title="" class="popup">
      <img src="img/kk14-14.jpg" width="160" height="138" alt=""  />
      <img src="img/kk14-14.jpg" width="285" height="220" alt="" class="large4" /></a>
		</div> 
		<p class="caption">Ethiopia</p>
	</div>

	<div class="block1">
		<div class="photo">
			<a href="#" title="" class="popup">
      <img src="img/kk15-15.jpg" width="160" height="138" alt="" />
      <img src="img/kk15-15.jpg" width="285" height="220" alt="" class="large5" /></a>
		</div>
		<p class="caption">Vatican</p>
	</div>

</div><!--container-->
</body>
</html>