JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<div class="captioned">
    <img src="//placehold.it/600x600">
    <div class="caption">
        <!--<div class="title">Lorem ipsum dolar</div>
        <div class="text">
            The quick brown fox jumps over the lazy dog.
        </div>-->
    </div>
</div>

CSS

.captioned {
    overflow: hidden;
    position: relative;
    width: 600px;
}

.captioned img {
    vertical-align: middle;
}

.captioned .caption {
    background: rgba(0, 0, 0, 0.25);
    position: absolute;
    height: 425px;
    width: 141.421357%; /* √2 */
    bottom: -325px;
    right: -41.42135623731px;
    transform-origin: 83.33333333% 0%;
    transition: transform 0.1s ease-in;
}

.captioned:hover .caption {
    transform: rotate(45deg);
}