どうも！LSSです！！
画像の下半分がマウスホバーで出現
写真にマウスカーソルをのせてみてください（スマホの場合はタップ）
コード
<style>
.halfpic{
position:relative;
width:280px;
height:400px;
transform-style: preserve-3d;
perspective:500px;
}
.halfpic div{
position:absolute;
left:0;
width:100%;
height:50%;
background-image:url('画像ファイルのURL');
background-size:100% 200%;
background-repeat:no-repeat;
}
.halfpic div:nth-child(1){
top:0;
background-position:0 0;
}
.halfpic div:nth-child(2){
bottom:0;
background-position:0 100%;
backface-visibility: hidden;
transform-origin:0 0;
transform:rotateX(-90deg);
transition:0.5s;
}
.halfpic:hover div:nth-child(2){
transform:rotateX(0deg);
}
</style>
<div class="halfpic">
<div> </div>
<div> </div>
</div>
枠サイズの調整
width:280px;
height:400px;
の箇所で、画像を表示する枠の大きさ（開いた時のサイズ）を指定します。
画像がこの枠に収まるように伸縮して表示されるので、元の画像の縦横比に合わせて指定する事をオススメします。
画像の指定
background-image:url('画像ファイルのURL');
この青文字部分を、画像ファイルのURLに差し替えます。
例えば画像ファイルのURLが「https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20220422/20220422232137.jpg」だとしたら、
background-image:url('https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20220422/20220422232137.jpg');
のようになります。
あとがき
「一枚の画像を上下別々に扱う」という事をやろうとしていたのですが、それをとりあえずどう見せるか？と考えてるうちに、久々にCSSの3Dアニメになりました。
の機能限定版のような気がしないでもないですｗ
下半分のほうにオチがあるような画像を使うとなお面白いかもですね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
