<div id="picture">
<!-- チェックボックス -->
<input type="radio" name="picture" id="pic1" checked>
<input type="radio" name="picture" id="pic2">
<input type="radio" name="picture" id="pic3">
<input type="radio" name="picture" id="pic4">
<div id="bg-pic">
<div class="inside">
<div class="pic pic_1">
</div>
<div class="pic pic_2">
</div>
<div class="pic pic_3">
</div>
<div class="pic pic_4">
</div>
</div>
</div>
<!-- スライダーのナビゲーションボタン -->
<div id="slide-buttons">
<label for="pic1"></label>
<label for="pic2"></label>
<label for="pic3"></label>
<label for="pic4"></label>
</div>
</div>
#picture {
margin: 0 auto;
width: 500px;
max-width: 100%;
text-align: center;
}
#picture input[type=radio] {
display: none;
}
#picture label {
cursor:pointer;
text-decoration: none;
padding: 5px;
}
#bg-pic {
background: #fff;
position: relative;
z-index: 1;
width: 90%;
overflow: hidden;
/* ボックスのはみ打た部分を隠す */
transform: rotateX(40deg) rotateZ(-20deg);
/* 画像の角度調整 */
box-shadow: -30px 30px 15px 5px rgba(0,0,0,0.4);
/* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、広がりの長さ、色） */
transition-duration:.8s;
/* アニメーションの開始から終了までの時間を指定 */
}
#bg-pic:hover {
transform: rotateX(40deg) rotateZ(-20deg);
/* 画像の角度調整 */
box-shadow: -30px 30px 15px 5px rgba(0,0,0,0.4);
/* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、広がりの長さ、色） */
}
#pic1:checked ~ #bg-pic .inside {
margin-left: 0;
}
#pic2:checked ~ #bg-pic .inside {
margin-left: -100%;
}
#pic3:checked ~ #bg-pic .inside {
margin-left: -200%;
}
#pic4:checked ~ #bg-pic .inside {
margin-left: -300%;
}
#bg-pic .inside {
width: 400%;
line-height: 0;
height: 300px;
}
#bg-pic .pic {
width: 25%;
float:left;
display: flex;
justify-content: center;
align-items: center;
/* 上３行でボックスをど真ん中に指定 */
height: 100%;
background-size: cover;
}
#bg-pic .pic_1 {
background-image: url("https://images.unsplash.com/photo-1473181488821-2d23949a045a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
#bg-pic .pic_2 {
background-image: url("https://images.unsplash.com/photo-1442323794357-25b2ec110967?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80");
}
#bg-pic .pic_3 {
background-image: url("https://images.unsplash.com/photo-1498550744921-75f79806b8a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
#bg-pic .pic_4 {
background-image: url("https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
/* スライダーの送りボタンを指定 */
#slide-buttons {
margin: 60px 0 0;
text-align: center;
}
#slide-buttons label {
display: inline-block;
width: 10px;
height: 10px;
border-radius:0%;
background: gainsboro;
margin: 0 10px;
transform: scale(1,1);
/* XY軸(横縦)の伸縮率を指定 */
transition-duration:.5s;
/* アニメーションの開始から終了までの時間を指定 */
}
#slide-buttons label:hover {
transform: scale(1.5,1.5);
/* XY軸(横縦)の伸縮率を指定 */
}
#pic1:checked ~ #slide-buttons label:nth-child(1),
#pic2:checked ~ #slide-buttons label:nth-child(2),
#pic3:checked ~ #slide-buttons label:nth-child(3),
#pic4:checked ~ #slide-buttons label:nth-child(4) {
background: #444;
}
ふたご
