画像を以下のようにしたいのですが、どうやってやれば以下の画像通りになりますでしょうか?
html
1<div class='photo-box'> 2 <div class='photo'> 3 <input type='radio' name='Photo' id='photo1'checked/> 4 <label for='photo1'><img src='img/2019-livepark.jpg'></label> 5 <img src='img/2019-livepark.jpg'> 6 7 <input type="radio" name="Photo" id='photo2'> 8 <label for="photo2"><img src="img/2019pool.jpg"></label> 9 <img src='img/2019pool.jpg'> 10 11 <input type="radio" name="Photo" id='photo3'> 12 <label for='photo3'><img src='img/azisai.jpg'></label> 13 <img src='img/azisai.jpg'> 14 15 <input type="radio" name="Photo" id='photo4'> 16 <label for='photo4'><img src='img/animal.jpg'></label> 17 <img src='img/animal.jpg'> 18 19 <input type="radio" name="Photo" id='photo5'> 20 <label for='photo5'><img src='img/bas.jpg'></label> 21 <img src='img/bas.jpg'> 22 23 <input type="radio" name="Photo" id='photo6'> 24 <label for='photo6'><img src='img/BBQ_pack.jpg'></label> 25 <img src='img/BBQ_pack.jpg'> 26 27 <input type="radio" name="Photo" id='photo7'> 28 <label for='photo7'><img src='img/enjoy.jpg'></label> 29 <img src='img/enjoy.jpg'> 30 31 32 <input type="radio" name="Photo" id='photo8'> 33 <label for='photo8'><img src='img/fes.jpg'></label> 34 <img src='img/fes.jpg'> 35 36 <input type="radio" name="Photo" id='photo9'> 37 <label for='photo9'><img src='img/fuwafuwa.jpg'></label> 38 <img src='img/fuwafuwa.jpg'> 39 </div> 40 </div>
CSS
1.photo-box{ 2 display: block; 3 background-color: white; 4 width: 1000px; 5 position: relative; 6 top: 400px; 7 left: 450px; 8 9} 10 11 12.photo{ 13 width: 600px; 14 padding-top: 400px; 15 position: relative; 16 margin: 2em auto; 17 z-index: 7777; 18 left: 0px; 19 top: 5px; 20} 21.photo > img{ 22 position: absolute; 23 left: 0; 24 top: 0; 25 transition: all 0.5s; 26 border-radius: 3px; 27 box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); 28 29} 30 31.photo input[name='Photo']{ 32 display: none; 33} 34 35.photo label{ 36 margin: 15px 5px 0 5px; 37 border: 2px solid #ffffff; 38 display: inline-block; 39 cursor: pointer; 40 transition: all 0.5s ease; 41 opacity: 0.6; 42 border-radius: 3px; 43 44} 45 46.photo label:hover{ 47 opacity: 0.9; 48} 49 50.photo label img{ 51 display: block; 52 width: 40px; 53 border-radius: 2px; 54} 55 56.photo input[name='Photo']:checked + label{ 57 border: 2px solid #FF7043; 58 opacity: 1; 59} 60.photo input[name='Photo'] ~ img{ 61 opacity: 0; 62} 63.photo input[name='Photo']:checked + label + img{ 64 opacity: 1; 65} 66 67 68div.photo{ 69 right: 350px; 70 top: 400px; 71}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。