jQuery：プラグイン：LightBox - Webデザインのこと、いろいろ

Light Box：完成版にリンク
【jQuery】これだけで完璧に導入できる［Lightbox］の実装方法。 - ONZE：参考サイト

★ a href="000.png" data-lightbox="XXX" data-lightbox という名前を追加して、グループを作成する
★JavaScriptについては　/body の直前に挿入すること
★ホバーした際にはCSS3のアニメーションでキャプションが出現する
ようにしてある
f:id:sankoblog:20160404000119p:plain

<!DOCTYPEhtml>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Light Box</title>
<link rel="stylesheet" href="css/style02css.css">  <!--順番に気をつける-->
<link rel="stylesheet" href="css/lightbox.css"> <!-- ダウンロードしたcss-->

</head>

<body>
<div id="container">
<div id="wrapper">
<ul>
<li><a href="img/01.png" data-lightbox="potsu"><img src="img/01_s.png" alt="水滴">
<div id="cap1">
<h2>ぽつぽつぽつ</h2>
<p>雨が降ってきましたね</p>
</div>
</a></li>

<li><a href="img/02.png" data-lightbox="potsu"><img src="img/02_s.png" alt="白鳥">
<div id="cap2">
<h2>くわくわくわ</h2>
<p>白鳥がパンをほしがっていますね</p>
</div>
</a></li>

<li><a href="img/03.png" data-lightbox="potsu"><img src="img/03_s.png" alt="気球">
<div id="cap3">
<h2>ぷかぷかぷか</h2>
<p>気球に乗って旅をしたいですね</p>
</div>
</a></li>

<li><a href="img/04.png" data-lightbox="potsu"><img src="img/04_s.png" alt="シャボン玉">
<div id="cap4">
<h2>まるまるまる</h2>
<p>しゃぼん玉っていいものですよね</p>
</div>
</a></li>
</ul>
</div><!--#wrapper-->
</div><!--#container-->
<script src="js/jquery-1.12.1.min.js"></script>  <!--順番に気をつける-->
<script src="js/lightbox.js"></script> <!-- ダウンロードしたjs-->
</body>
</html>

@charset "utf-8";
/* CSS Document */

/*reset*/
html,body,ul,li {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	}
ul { list-style: none; }	
a { text-decoration: none; }
body {
	font-size: 16px;
		background: #CCC;
	}
img {
	border: none;
	vertical-align: bottom;
	}
/*----------------------------------*/
#container{
	width: 1360px;
	margin: 50px auto;
}
#wrapper {
	width: 1240px;
	padding: 40px 30px 30px 40px;
	background: #FFF;
	overflow: hidden;
}
ul li {
	float: left;
	margin: 0 10px 10px 0;
	position: relative;  /*重要*/
	overflow: hidden; /* はみ出しているところを隠す*/
	}
li h2 {
	margin: 40px 0 0 20px;
}
li p {
	margin-left: 20px;
}
/*----------------------------------*/
#cap1 {
	width: 100%;
	height: 200px;
	background: rgba(0,0,0,0.5);  /*半透明の黒*/
	color: #FFF;
	position: absolute;  /*重要*/
	top: 0;
	left: 0;
	opacity: 0; /* 隠す*/
	transition: 0.7s;
}
li:hover #cap1 {
	opacity: 1;  /*ホバーしたら見える状態になる*/
}
/*----------------------------------*/
#cap2 {
	width: 100%;
	height: 200px;
	background: rgba(0,0,0,0.5);  /*半透明の黒*/
	color: #FFF;
	position: absolute;  /*重要*/
	top: -100%;  /*上から下に下がってくるので*/
	left: 210;
	transition: 0.7s;
}
li:hover #cap2 {
	position: absolute;
	top: 0%;
}
/*----------------------------------*/
#cap3 {
	width: 100%;
	height: 200px;
	background: rgba(0,0,0,0.5);  /*半透明の黒*/
	color: #FFF;
	position: absolute;  /*重要*/
	top: 0;
	left: -100%;
	transition: 0.7s;
}
li:hover #cap3 {
	position: absolute;
	left: 0%;
}
/*----------------------------------*/
#cap4 {
	width: 100%;
	height: 200px;
	background: rgba(0,0,0,0.5);  /*半透明の黒*/
	color: #FFF;
	position: absolute;  /*重要*/
	bottom: -100%;
	transition: 0.7s;
}
li:hover #cap4 {
	position: absolute;
	bottom: 0%;
}
/*----------------------------------*/
@media screen and (max-width: 959px) {
#container{
	width: 690px;
}
#wrapper {
	width: 620px;
	}
}
/*----------------------------------*/
@media screen and (max-width: 767px) {
#container{
	width: 380px;
}
#wrapper {
	width: 310px;
}
li {
	float: none;
}