カードをめくる

画像を最初の場面に入れるのは「omote」がひっくり返した文章になるので、「ura」に画像のURLを入れます。

<div class="card csize">
<input id="tg01" style="display: none;" type="checkbox" />
<label id="omote" class="fuda csize" for="tg01">めくると出てくる文章</label>
<label id="ura" class="fuda csize" for="tg01"></label>
</div>

↑　この><の間です。

---

入れた後、「hatena-fotolife」は必ず削除します。
（hatena-fotolifeを残してあると、クリックしてもめくれません）

--></style>
<div class="card csize">
<input id="tg01" style="display: none;" type="checkbox" />
<label id="omote" class="fuda csize" for="tg01">めくると出てくる文章</label>
<label id="ura" class="fuda csize" for="tg01"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/non704/20220623/20220623113312.jpg" 
width="296" height="400" loading="lazy" title="" class="hatena-fotolife" itemprop="image"></label>
</div>

---

画像のサイズに替えます

.csize{
width:296px;
height:400px; }

---

ここまでで・・・画像は入りますが、画像が入ったと言うだけです。

---

「ura」の枠が要らないので、「omote」の枠と同じにします。

#omote{
transform:rotateY(180deg);
background:white;
border:2px solid black;
padding:0.6em;
}
#ura{
transform:rotateY(0deg);
background:pink;
border:10px double black;
background-image:linear-gradient(45deg,#ffffff00 50%,#ffffff80 50%);
background-size:20px 20px;
}
　　　　　↓

#omote{
transform:rotateY(180deg);
background:white;
border:2px solid black;
padding:0.6em;
}
#ura{
transform:rotateY(0deg);
background:white;
border:2px solid black;
padding:0.6em;
}

一応綺麗にはなりましたが・・・下の余白が大きいです。

padding:0.6em; になっていますが、この部分の直し方が分かりません。(^^;)