JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<div class="wrap">
    <div class="box">
        <img src="https://unsplash.it/320/160" class="pic">
    </div>
</div>

CSS

.wrap {
    position: relative;
    margin: 50px;
    width: 400px;
    height: 300px;
    /* overflow: hidden; */
    background-color: gold;
}

.box {
    position: absolute;
    top: -100%;
    right: -100%;
    bottom: -100%;
    left: -100%;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    background-color: tomato;
    animation: scaaal linear 2.5s alternate infinite;
}

.pic {
    opacity: 0.8;
    position: absolute;
    top: -100%;
    right: -100%;
    bottom: -100%;
    left: -100%;
    margin: auto;
    min-width: 100%;
    min-height: 100%;
}

@keyframes scaaal {
    0% {
        max-width: 30%;
        max-height: 30%;
    }
    100% {
        max-width: 120%;
        max-height: 120%;
    }
}