「CSS変更」の編集履歴（バックアップ）一覧はこちら

「CSS変更」(2015/10/17 (土) 14:45:09) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

/***マップ表示***/
/*ギャラリー全体のコンテナー*/
#stage {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
}
/*全サムネイルのコンテナー*/
#thumbs {
	margin-left: 2%;
	text-align: center;
}
/*サムネイルの幅、ポインターを手のひらに*/
#thumbs label img {
	width: 10%;
	cursor: pointer;
}
/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5, #r6 {
	display: none;
}
/*表示画像の初期配置（全部透明に）とtransition設定*/
.photo {
	position: absolute;
	left: 0;
	top: 0;
}
.photo img {
	width: 100%;
	opacity: 0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}
/*チェックされたサムネイルに相当する画像だけを表示*/
#r1:checked ~ #photo1 img,
#r2:checked ~ #photo2 img,
#r3:checked ~ #photo3 img,
#r4:checked ~ #photo4 img,
#r5:checked ~ #photo5 img,
#r6:checked ~ #photo6 img {
	opacity: 1;
}

【参考】http://css.programming.jp/
T.Yoshioka．
“フェイドイン型フォトギャラリー（レスポンシブ）”．
cssだけで作るフォトギャラリー・スライドショー．
2015．
http://css.programming.jp/?p=901、（参照2015-10-17）．