今回のお題は,
サンプル1 CSS3: Sliding image panels
画像とキャプションを切り替える
<body>
要素に書くコードは,type
属性を"radio"とした<input>
と<label>
の要素がボタンとなる。キャプションはh3
要素の中に,<span>
要素でタイトルclass
属性"img-title")class
属性"img-caption")<h3>
要素はさらに<div>
要素class
属性"img-titles")<img>
要素がないことだ。画像は空の<div>
要素class
属性"bg-img")
<div class="container">
<input id="select-img-1" name="radio-set-1" type="radio" checked/>
<label for="select-img-1" class="label-img-1">1</label>
<input id="select-img-2" name="radio-set-1" type="radio" />
<label for="select-img-2" class="label-img-2">2</label>
<input id="select-img-3" name="radio-set-1" type="radio" />
<label for="select-img-3" class="label-img-3">3</label>
<input id="select-img-4" name="radio-set-1" type="radio" />
<label for="select-img-4" class="label-img-4">4</label>
<div class="bg-img">
</div>
<div class="img-titles">
<h3><span class="img-title">Child</span><span class="img-caption">Single emperor penguin chick</span></h3>
<h3><span class="img-title">Adult</span><span class="img-caption">Single penguin on a piece of ice</span></h3>
<h3><span class="img-title">Family</span><span class="img-caption">Emperor penguin with chicks</span></h3>
<h3><span class="img-title">Children</span><span class="img-caption">Emperor penguin chicks</span></h3>
</div>
</div>
この<body>
要素の記述に対して,<style>
要素を与える。これで,
画像とキャプションが切り替わる仕組みを,type
属性"radio"の<input>
要素):checked
擬似クラスでとれる。そこで,url()
関数でbackground-image
プロパティに定めた。
#select-img-1:checked ~ .bg-img {
background-image: url(images/image_001.png);
}
#select-img-2:checked ~ .bg-img {
background-image: url(images/image_002.png);
}
#select-img-3:checked ~ .bg-img {
background-image: url(images/image_003.png);
}
#select-img-4:checked ~ .bg-img {
background-image: url(images/image_004.png);
}
キャプションの要素class
属性"img-title"と"img-caption")opacity
プロパティで透明にしておく。そして,<h3>
要素を一般兄弟~
と:nth-child()
擬似クラスで取り出して不透明にすればよい。
.img-title, .img-caption {
opacity: 0;
}
#select-img-1:checked ~ .img-titles h3:nth-child(1) span,
#select-img-2:checked ~ .img-titles h3:nth-child(2) span,
#select-img-3:checked ~ .img-titles h3:nth-child(3) span,
#select-img-4:checked ~ .img-titles h3:nth-child(4) span {
opacity: 1;
}
<style>
要素の定めは,<script>
要素で-prefix-freeを読み込んでいる
コード1 ボタンのクリックで画像とキャプションを切り替える
<script src="lib/prefixfree.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet" type="text/css">
<style>
body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
background: aliceblue;
}
.container {
width: 400px;
height: 267px;
position: relative;
margin: 0 auto;
text-align: center;
border: 15px solid white;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.container label {
font-style: italic;
width: 100px;
height: 30px;
cursor: pointer;
color: white;
line-height: 24px;
font-size: 20px;
float: left;
position: relative;
margin-top: 230px;
z-index: 100;
}
.container label::before {
content: '';
width: 24px;
height: 24px;
background: rgba(135, 206, 235, 0.9);
position: absolute;
left: 50%;
margin-left: -12px;
border-radius: 50%;
box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.3);
z-index: -1;
}
.container label:after {
content: '';
width: 1px;
height: 267px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
position: absolute;
bottom: -20px;
right: 0px;
}
.container input {
display: none;
}
.bg-img {
width: 400px;
height: 267px;
position: absolute;
}
#select-img-1:checked ~ .bg-img {
background-image: url(images/image_001.png);
}
#select-img-2:checked ~ .bg-img {
background-image: url(images/image_002.png);
}
#select-img-3:checked ~ .bg-img {
background-image: url(images/image_003.png);
}
#select-img-4:checked ~ .bg-img {
background-image: url(images/image_004.png);
}
.img-title, .img-caption {
font-weight: normal;
color: white;
z-index: 100;
position: absolute;
width: 100%;
left: 0px;
opacity: 0;
top: 90px;
}
.img-title {
left: 0px;
font-family: "Oswald", sans-serif;
font-size: 48px;
letter-spacing: 3px;
}
.img-caption {
margin-top: 100px;
letter-spacing: 0px;
background: rgba(130, 195, 217, 0.9);
font-size: 14px;
padding: 4px 0px;
font-style: italic;
}
#select-img-1:checked ~ .img-titles h3:nth-child(1) span,
#select-img-2:checked ~ .img-titles h3:nth-child(2) span,
#select-img-3:checked ~ .img-titles h3:nth-child(3) span,
#select-img-4:checked ~ .img-titles h3:nth-child(4) span {
opacity: 1;
}
</style>