カードをめくるー画像編
LSSさんのカードをめくるその２は、画像を入れるためのコードではありませんでしたが、そこに無理やり画像を入れると・・・
←これは画像です
↑下の余白が他の３つよりやや広くなります。
このままでも楽しめますが・・・ちょっと気になります。
LSSさんにお聞きしたら・・・画像入れるためのコードを教えて下さいました。
・・・何もかも凄すぎます、LSSさんは。
画像を入れるためのコード
<style><!--
.card{
position:relative;
perspective:500px;
}
.fuda{
position:absolute;
display:inline-block;
transition:2s;
backface-visibility:hidden;
border-radius:15px;
}
.csize{
width:150px;
height:200px;
}
#omote{
transform:rotateY(180deg);
background:white;
border:2px solid black;
padding:0.6em;
}
#ura{
transform:rotateY(0deg);
background:pink;
border:10px double black;
background:url(https://cdn-ak.f.st-hatena.com/images/fotolife/n/non704/20220623/20220623113312.jpg) 0 0/100% 100%;
}
#tg01:checked~#omote{
transform:rotateY(0deg);
}
#tg01:checked~#ura{
transform:rotateY(-180deg);
}
--></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"></label></div>
↑ 緑字の部分が画像のＵＲＬ、赤字の画像のサイスも替えます。
こんな感じになり、凄く素敵です。（クリックして見て下さい）
ここまでのやり取りはここに載せてあります。https://aoisora7.hatenablog.com/entry/2022/06/23/123949
追記
もう一つLSSさんが提案して下さったのが余白を入れると言うもの。
←これは画像です
これも素敵です。
「周囲に少し余白をとりたい」場合は、backgroundの行を
background:url(https://cdn-ak.f.st-hatena.com/images/fotolife/n/non704/20220623/20220623113312.jpg) 50% 50%/92% 92% no-repeat;
のようにする（50% 50%はbackground-positionで中央寄せ、92% 92%は縦横ともサイズを92%に、no-repeatで繰り返しを無くす）という事もできます。
