CSSでポップアップ風画像置換

CSS

http://000.tyabo.com/HTML%26CSS/CSS_popup/index.html

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>CSS_ポップアップ練習</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/style.css" rel="stylesheet" type="text/css" 
media="screen, print" />

</head>
<body>
<div id="container">
<div id="header">
<h1>SUOMI</h1>
</div>
<!--/div#header-->

<div id="wrapper">

<div id="content">

<div class="box1">
<div class="photo1">
<a href="#"  class="thumb">
<img src="images/p01_s.jpg" alt="" width="180" height="125"/>
<img src="images/p01.jpg" alt="" width="460" height="320" class="large1" />
</a>
</div>
<p class="caption"></p>
</div>

<div class="box2">
<div class="photo1">
<a href="#"  class="thumb">
<img src="images/p04_s.jpg" alt="" width="180" height="125"/>
<img src="images/p04.jpg" alt="" width="460" height="320" class="large1" />
</a>
</div>
<p class="caption"></p>
</div>


<div class="box3">
<div class="photo2">
<a href="#"  class="thumb">
<img src="images/p03_s.jpg" alt="" width="180" height="125"/>
<img src="images/p03.jpg" alt=""  width="460" height="320"  class="large2" />
</a>
</div>
<p class="caption"></p>
</div>

<div class="box4">
<div class="photo2">
<a href="#"  class="thumb">
<img src="images/p02_s.jpg" alt="" width="180" height="125"/>
<img src="images/p02.jpg" alt="" width="460" height="320" class="large2" />
</a>
</div>
<p class="caption"></p>
</div>

</div>
<!--/div#content-->

<div id="content2">

<div class="box5">
<div class="photo3">
<a href="#"  class="thumb">
<img src="images/p05_s.jpg" alt="" width="180" height="125"/>
<img src="images/p05.jpg" alt=""  width="460" height="320"  
class="large3" />
</a>
</div>
<p class="caption"></p>
</div>

<div class="box6">
<div class="photo4">
<a href="#"  class="thumb">
<img src="images/p06_s.jpg" alt="" width="180" height="125"/>
<img src="images/p06.jpg" alt="" width="460" height="320" 
class="large4" />
</a>
</div>
<p class="caption"></p>
</div>

</div>
<!--/div#content2-->

<div id="content3">

<div class="box7">
<div class="photo5">
<a href="#"  class="thumb">
<img src="images/p09_s.jpg" alt="" width="180" height="125"/>
<img src="images/p09.jpg"alt=""  width="460" height="320" 
class="large5" />
</a>
</div>
<p class="caption"></p>
</div>

<div class="box8">
<div class="photo5">
<a href="#"  class="thumb">
<img src="images/p08_s.jpg" alt="" width="180" height="125"/>
<img src="images/p08.jpg" alt="" width="460" height="320" 
class="large5" />
</a>
</div>
<p class="caption"></p>
</div>


<div class="box9">
<div class="photo6">
<a href="#"  class="thumb">
<img src="images/p07_s.jpg" alt="" width="180" height="125"/>
<img src="images/p07.jpg" alt="" width="460" height="320" 
class="large6" />
</a>
</div>
<p class="caption"></p>
</div>

<div class="box10">
<div class="photo6">
<a href="#"  class="thumb">
<img src="images/p10_s.jpg" alt="" width="180" height="125"/>
<img src="images/p10.jpg" alt="" width="460" height="320" 
class="large6" />
</a>
</div>
<p class="caption"></p>
</div>

</div>
<!--/div#content3-->

</div>
<!--/div#wrapper-->

</div>
<!--/div#container-->

</body>
</html>
||< 



<h5>CSS</h5>
>||
@charset "utf-8";
/* CSS Document */

/* リセット　*/

html, body, h1, h2, h3, h4, h5 h6, p,  address,
ul, ol, li, dl, dt, dd, table, td, th, pre, form, 
fieldset {
margin: 0;
padding: 0;
line-height: 1.0;
}

image {
	border: none;
}


/* レイアウト */
body {
	background: ;
	font-family: Georgia, 
	"Times New Roman", 
	Times, serif;
}

h1 {
	margin : 0 0 10px 145px;
	color: #444;
	font-size: 1.1em;
	border-radius: 10px;			
	border-top: 10px solid #B8C2bb;
	border-bottom: 10px solid #B8C2bb;
	border-left: 10px dotted #fff;
	border-right:10px dotted #fff;
	width: 120px;
	padding-left: 35px;
	
}


#container {
     margin: 0 auto ;
	 width:auto;	
	}

#header {
	height: 50px;
	width: 100%;
	padding: 10px 0;
	background: #fff;
	background:-webkit-linear-gradient(#ccc, #fff);
	background:-moz-linear-gradient(#ccc, #fff);
	background:-ms-linear-gradient(#ccc, #fff);
	background:-o-linear-gradient(#ccc, #fff);
	background:linear-gradient(#ccc, #fff); 
	border-bottom: 5px solid #B8C2bb;
	}

	
#wrapper {
    background: #222;
	background: -webkit-linear-gradient(#222, #444);
   background: -moz-linear-gradient(#222, #444);
   background: -ms-linear-gradient(#222, #444);
   background: -o-linear-gradient(#222, #444);
   background: linear-gradient(#222, #444);		
	width: auto;
	height: 600px;
	padding: 20px 100px;

}

#content {
	width: 1050px;
	height: 145px;
	clear: both;
	margin: 0 0 60px 0;
	border : 1px solid #333;
	border-radius: 10px;	
}

#content2 {
	width: 1050px;
	height: 145px;
	clear: both;
	margin: 0 0 60px 0;
	border : 1px solid #444;
	border-radius: 10px;	
}

#content3 {
	width: 1050px;
	height: 145px;
	clear: both;
	margin: 0 0 0px 0;
	border : 1px solid #555;
	border-radius: 10px;	
}


.box1, .box2, .box3, .box4 {
  float: left;	
  display: block;
  width:  180px;
  height: 125px;
  margin: 10px 40px;
}

.box5 {
  float: left;	
  display: block;
  width:  180px;
  height: 125px;
  margin: 10px 0 10px 40px;
}

.box6 {
  float: left;	
  display: block;
  width:  180px;
  height: 125px;
  margin: 10px 0 10px 600px;
}


.box7, .box8, .box9, .box10 {
  float: left;	
  display: block;
  width:  180px;
  height: 125px;
  margin: 10px 40px;
}

.photo1 {
	position: relative;
	top: 0;
	left: 0;
	width: 180px;
}

.photo1 a .large1 {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 1px;
}

.photo1 a.thumb:hover .large1{
	display: block;
  position: absolute;
	left: -15px ;
	top: -15px;
	width: 400px;
	height: 300px;
	z-index: 1000;
	box-shadow: 2px 2px 2px 2px #333;
}


.photo2 {
	position: relative;
	top: 0;
	left: 0;
	width: 180px;
}

.photo2 a .large2 {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 1px;
	}

.photo2 a.thumb:hover .large2{
	display: block;
  position: absolute;
	top: -15px;
	right: -15px ;
	width: 400px;
	height: 300px;
	z-index: 1000;
	box-shadow: 2px 2px 2px 2px #333;
}


.photo3 {
	position: relative;
	top: 0;
	left: 0;
	width: 180px;
}

.photo3 a .large3 {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 1px;
	}

.photo3 a.thumb:hover .large3{
	display: block;
  position: absolute;
	left: -15px ;
	top: -90px;
	width: 400px;
	height: 300px;
	z-index: 1000;
	box-shadow: 2px 2px 2px 2px #333;
}

.photo4 {
	position: relative;
	top: 0;
	left: 0;
	width: 180px;
}

.photo4 a .large4 {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 1px;
	}

.photo4 a.thumb:hover .large4{
	display: block;
  position: absolute;
	right :-15px ;
	top: -90px;
	width: 400px;
	height: 300px;
	z-index: 1000;
	box-shadow: 2px 2px 2px 2px #333;
}

.photo5 {
	position: relative;
	top: 0;
	left: 0;
	width: 180px;
}

.photo5 a .large5 {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 1px;
	height: 1px;
	}

.photo5 a.thumb:hover .large5{
	display: block;
    position: absolute;
	left: -15px ;
	bottom: -15px;
	width: 400px;
	height: 300px;
	z-index: 1000;
	box-shadow: 2px 2px 2px 2px #333;
}

.photo6 {
	position: relative;
	top: 0;
	left: 0;
	width: 180px;
}

.photo6 a .large6 {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 1px;
	height: 1px;
	}

.photo6 a.thumb:hover .large6{
	display: block;
  position: absolute;
	right: -15px ;
	bottom: -15px;
	width: 400px;
	height: 300px;
	z-index: 1000;
	box-shadow: 2px 2px 2px 2px #333;
}