JSFiddle - React, Tailwind, and code Playground

by Purag Moumdjian

HTML

<div class="container">
        <img src="http://placehold.it/300x300">
        <img src="http://placehold.it/300x300">
        <img src="http://placehold.it/300x300">
        <img src="http://placehold.it/300x300">
        <img src="http://placehold.it/300x300">
    </div>

CSS

img {
        width:300px;
        height:300px;
        position:absolute;
        opacity:0.2;
    }
    
    .container {
        position:relative;
        overflow:hidden;
        width:300px;
        height:300px;
    }
    
    img:nth-child(1) {
        opacity:1;   
    }
    
    img:nth-child(2) {
        left:2px;
        top:2px;
    }
    
    img:nth-child(3) {
        left:-2px;
        top:-2px;
    }

    img:nth-child(4) {
        left:-1px;
        top:-1px;
    }
    
    img:nth-child(5) {
        left:1px;
        top:1px;
    }