JSFiddle - React, Tailwind, and code Playground

HTML

<figure>
    <img src="http://waldorfastoria3.hilton.com/resources/media/wa/EYWRRWA/en_US/img/shared/full_page_image_gallery/main/WA_beach_8.jpg"
    />
        <img src="http://waldorfastoria3.hilton.com/resources/media/wa/EYWRRWA/en_US/img/shared/full_page_image_gallery/main/WA_beach_8.jpg"
    />
    <div class="blinds">
        <div class="blind"></div>
        <div class="blind"></div>
        <div class="blind"></div>
        <div class="blind"></div>
        <div class="blind"></div>
        <div class="blind"></div>
        <div class="blind"></div>
        <div class="blind"></div>
        <div class="blind"></div>
        <div class="blind"></div>
    </div>
</figure>

CSS

figure {
    float: left;
    position: relative;
}

img {
    display: block;
}

.blinds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.blind {
    width: 100%;
    height: 10%;
    background: white;
    position: relative;
    -webkit-animation: blind 5s both infinite;
}

@-webkit-keyframes blind {
    from {
        -webkit-transform: rotateX(90deg);
    }
    
    to {
        -webkit-transform: rotateX(270deg);
    }
}