Bild entfaltet sich bei Klick

Quellcode

<html>
<head>

<style type="text/css">
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap");
*, *::before, *::after {padding: 0; margin: 0 auto; box-sizing: border-box;}
body { justify-content: center; align-items: center;}
#moreInfo { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: fixed; top: -100%; left: -100%;}
.mi { --openText: "Click to open..."; --altText: "😎"; --img: url("https://picsum.photos/id/420/960/320");
--fullText: "html, css oder java bietet Ihnen die Möglichkeit Webseiten zu erstellen. Mit HTML Knowhow können Sie Ihre Möglichkeiten erheblich verbesser. Meine Seiten helfen Ihnen beim Design";
position: relative; width: 12em; height: 4em; background-image: var(--img); background-position: right; background-size: 300% 300%; transition: transform 0.5s 0s;
transform-style: preserve-3d; perspective: 40em;}
.mi-outer {filter: drop-shadow(0.4em 0.2em 1em #0004);}
.mi > * {position: absolute; transform-style: preserve-3d;}
.mi > *::before, .mi > *::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.mi-flap1 {top: 0; left: 0; width: 100%; height: 100%; transform-origin: top; transition: transform 0.5s 1.5s;}
.mi-flap1::before {content: var(--openText); background-color: #eee; border: 2px solid #555; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.25s;}
.mi-flap1::after {background-image: var(--img); background-position: top right; background-size: 300% 300%; transform: rotateX(180deg);}
.mi-flap1:hover::before {border-color: #585;}
.mi-flap2 {top: 0; left: 0; width: 100%; height: 100%; transform-origin: bottom right; transition: transform 0.5s 1s;}
.mi-flap2::before {content: var(--altText); background-color: #eee; border: 2px solid #555; display: flex; align-items: center; justify-content: center;}
.mi-flap2::after {background-image: var(--img); background-position: bottom right; background-size: 300% 300%; transform: rotateX(180deg);}
.mi-flap3 {top: -100%; left: 0; width: 100%; height: 300%; transform-origin: right; visibility: hidden; transition: visibility 0s 1s, transform 0.5s 0.5s;}
.mi-flap3::before {background-image: var(--img); background-position: right; background-size: 300% 100%;}
.mi-flap3 .mi-info {background-position: right;}
.mi-flap3 .mi-info::after {left: -200%;}
.mi-flap4 {top: -100%; left: 0; width: 100%; height: 300%; transform-origin: left; visibility: hidden; transition: visibility 0s 1s, transform 0.5s 0s;}
.mi-flap4::before {background-image: var(--img); background-position: left; background-size: 300% 100%;}
.mi-flap4::after {content: unset;}
.mi-flap4 .mi-info {background-position: left;}
.mi-flap4 .mi-info::after {left: 0%;}
.mi-flap5 {top: -100%; left: 0; width: 100%; height: 300%; visibility: hidden; transform: rotateY(180deg); transition: visibility 0s 0.5s;}
.mi-flap5 .mi-info {background-position: center;}
.mi-flap5 .mi-info::after {left: -100%;}
.mi .mi-info {position: relative; width: 100%; height: 100%; background-image: var(--img); background-size: 300% 100%; transform: rotateY(180deg);
-webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; transform-style: preserve-3d;}
.mi .mi-info::after {padding: 4em 2em 2em; content: var(--fullText); border: 2px solid #555; position: absolute; top: 0%; width: 300%; height: 100%; background-color: #fffa;}
.mi .mi-close {position: absolute; top: 0; left: 0; padding: 0.5em; z-index: 2; cursor: pointer; transition: color 0.25s; transform-style: preserve-3d;}
.mi .mi-close:hover {color: #585;}

#moreInfo:checked ~ .mi-outer > .mi > .mi-flap1 {pointer-events: none; transform: rotateX(180deg); transition: transform 0.5s 0s;}
#moreInfo:checked ~ .mi-outer > .mi > .mi-flap2 {transform: rotateX(-180deg); transition: transform 0.5s 0.5s;}
#moreInfo:checked ~ .mi-outer > .mi > .mi-flap3 {transform: rotateY(180deg); visibility: visible; transition: visibility 0s 1s, transform 0.5s 1s;}
#moreInfo:checked ~ .mi-outer > .mi > .mi-flap4 {transform: rotateY(-180deg); visibility: visible; transition: visibility 0s 1s, transform 0.5s 1.5s;}
#moreInfo:checked ~ .mi-outer > .mi > .mi-flap5 {visibility: visible; transition: visibility 0s 1s;}
</style>
</head>

<body>
<table align="center" cellspacing="6" style="width: 30%">
<tr><td><br />
<input type="checkbox" id="moreInfo">

<div class="mi-outer">
<div class="mi">
<div class="mi-flap2"></div>
<label for="moreInfo" class="mi-flap1"></label>
<div class="mi-flap5">
<div class="mi-info"></div>
</div>
<div class="mi-flap4">
<div class="mi-info">
<label for="moreInfo" class="mi-close">X</label>
</div>
</div>
<div class="mi-flap3">
<div class="mi-info"></div>
</div>
</div>
</div>

<script src='https://assets.codepen.io/1948355/twitterButton-2.1.0.js'></script><br />
</td></tr>
</table>
</body>

</html>