<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>

@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 {
    font-family: 'Open Sans', sans-serif;
    background-image: radial-gradient(circle at center, #fff, #aaa);
    color: #333;
    font-weight: 600;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

$speedU: 0.5s;

#moreInfo {
    appearance: none;
    position: fixed;
    top: -100%; left: -100%;
}

.mi {
    --openText: "Click to open...";
    --altText: "😎";
    --img: url('https://picsum.photos/id/420/960/320');
    --fullText: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum porro delectus magni mollitia aut eligendi. Perferendis tenetur asperiores blanditiis nobis sint aliquam rem, facere dolores. Ipsa eveniet libero enim quisquam.";

    position: relative;
    width: 12em;
    height: 4em;
    background-image: var(--img);
    background-position: right;
    background-size: 300% 300%;
    transition: transform $speedU $speedU*0;
    transform-style: preserve-3d;
    perspective: 40em;
    
    &-outer {
        filter: drop-shadow(0.4em 0.2em 1em #0004);
    }

    & > * {
        position: absolute;
        transform-style: preserve-3d;
        
        &::before,
        &::after {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            backface-visibility: hidden;
        }
    }

    &-flap1 {
        top: 0; left: 0;
        width: 100%; height: 100%;
        transform-origin: top;
        transition: transform $speedU $speedU*3;

        &::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;
        }

        &::after {
            background-image: var(--img);
            background-position: top right;
            background-size: 300% 300%;
            transform: rotateX(180deg);
        }

        &:hover::before {
            border-color: #585;
        }
    }

    &-flap2 {
        top: 0; left: 0;
        width: 100%; height: 100%;
        transform-origin: bottom right;
        transition: transform $speedU $speedU*2;

        &::before {
            content: var(--altText);
            background-color: #eee;
            border: 2px solid #555;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        &::after {
            background-image: var(--img);
            background-position: bottom right;
            background-size: 300% 300%;
            transform: rotateX(180deg);
        }
    }

    &-flap3 {
        top: -100%; left: 0;
        width: 100%; height: 300%;
        transform-origin: right;
        visibility: hidden;
        transition:
            visibility 0s $speedU*2,
            transform $speedU $speedU*1;

        &::before {
            background-image: var(--img);
            background-position: right;
            background-size: 300% 100%;
        }

        & .mi-info {
            background-position: right;

            &::after {
                left: -200%;
            }
        }
    }

    &-flap4 {
        top: -100%; left: 0;
        width: 100%; height: 300%;
        transform-origin: left;
        visibility: hidden;
        transition:
            visibility 0s $speedU*2,
            transform $speedU $speedU*0;

        &::before {
            background-image: var(--img);
            background-position: left;
            background-size: 300% 100%;
        }

        &::after {
            content: unset;
        }

        & .mi-info {
            background-position: left;

            &::after {
                left: 0%;
            }
        }
    }

    &-flap5 {
        top: -100%; left: 0;
        width: 100%; height: 300%;
        visibility: hidden;
        transform: rotateY(180deg);
        transition: visibility 0s $speedU*1;

        & .mi-info {
            background-position: center;
            &::after {
                left: -100%;
            }
        }
    }

    & .mi-info {
        position: relative;
        width: 100%; height: 100%;
        background-image: var(--img);
        background-size: 300% 100%;
        transform: rotateY(180deg);
        backface-visibility: hidden;
        overflow: hidden;
        transform-style: preserve-3d;

        &::after {
            padding: 4em 2em 2em;
            content: var(--fullText);
            border: 2px solid #555;
            position: absolute;
            top: 0%; 
            width: 300%; height: 100%;
            background-color: #fffa;
        }
    }

    & .mi-close {
        position: absolute;
        top: 0; left: 0;
        padding: 0.5em;
        z-index: 2;
        cursor: pointer;
        transition: color 0.25s;
        transform-style: preserve-3d;

        &:hover {
            color: #585;
        }
    }
}

#moreInfo:checked ~ .mi-outer > .mi > .mi {

    &-flap1 {
        pointer-events: none;
        transform: rotateX(180deg);
        transition: transform $speedU $speedU*0;
    }

    &-flap2 {
        transform: rotateX(-180deg);
        transition: transform $speedU $speedU*1;
    }

    &-flap3 {
        transform: rotateY(180deg);
        visibility: visible;
        transition:
            visibility 0s $speedU*2,
            transform $speedU $speedU*2;
    }

    &-flap4 {
        transform: rotateY(-180deg);
        visibility: visible;
        transition:
            visibility 0s $speedU*2,
            transform $speedU $speedU*3;
    }

    &-flap5 {
        visibility: visible;
        transition: visibility 0s $speedU*2;
    }
}