<div class="container">
        <div>
            <img
                src="https://images.pexels.com/photos/39629/tiger-tiger-baby-tigerfamile-young-39629.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
        </div>
        <div>
            <img
                src="https://images.pexels.com/photos/459301/pexels-photo-459301.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        </div>
        <div>
            <img
                src="https://images.pexels.com/photos/459037/pexels-photo-459037.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        </div>
        <div>
            <img
                src="https://images.pexels.com/photos/414062/pexels-photo-414062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        </div>
        <div>
            <img
                src="https://images.pexels.com/photos/303024/pexels-photo-303024.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        </div>
        <div>
            <img
                src="https://images.pexels.com/photos/676578/pexels-photo-676578.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        </div>
        <div>
            <img
                src="https://images.pexels.com/photos/36762/scarlet-honeyeater-bird-red-feathers.jpg?auto=format%2Ccompress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        </div>
        <div>
            <img
                src="https://images.pexels.com/photos/461862/pexels-photo-461862.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        </div>
        <div>
            <img
                src="https://images.pexels.com/photos/1172064/pexels-photo-1172064.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        </div>
        <div>
            <img
                src="https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500" />
        </div>
        <div>
            <img
                src="https://images.pexels.com/photos/257840/pexels-photo-257840.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        </div>
        <div>
            <img
                src="https://images.pexels.com/photos/302804/pexels-photo-302804.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        </div>
        <div>
            <img
                src="https://images.pexels.com/photos/443446/pexels-photo-443446.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        </div>
 
    </div>
body {
    margin: 0;
    padding: 0;
    background: #232a34;
}

.container {
    display: flex;
    flex-flow: wrap;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    height: 100vh;
    width: 100vh;
    align-content: center;
    align-items: stretch;
    justify-content: center;
}

.container img {
    width: calc(100vw/6);
    height: auto;
    transition: all 1s linear;
}

.container div:nth-child(2n) img{
    border-top-left-radius: 27%;
    border-top-right-radius: 32%;
    border-bottom-left-radius: 34%;
    border-bottom-right-radius: 26%;
} 

.container div:nth-child(3n) img{
    border-top-left-radius: 21%;
    border-top-right-radius: 43%;
    border-bottom-left-radius: 21%;
    border-bottom-right-radius: 29%;
} 
.container div:nth-child(5n) img{
    border-top-left-radius: 41%;
    border-top-right-radius: 30%;
    border-bottom-left-radius: 37%;
    border-bottom-right-radius: 23%;
} 
.container div:nth-child(7n) img{
    border-top-left-radius: 38%;
    border-top-right-radius: 20%;
    border-bottom-left-radius: 21%;
    border-bottom-right-radius: 38%;
} 
.container div:nth-child(11n) img{
    border-top-left-radius: 41%;
    border-top-right-radius: 47%;
    border-bottom-left-radius: 48%;
    border-bottom-right-radius: 47%;
}

.container div:nth-child(13n) img{
    border-top-left-radius: 31%;
    border-top-right-radius: 67%;
    border-bottom-left-radius: 48%;
    border-bottom-right-radius: 57%;
}

.container div:first-child img {
    border-top-left-radius: 51%;
    border-top-right-radius: 57%;
    border-bottom-left-radius: 58%;
    border-bottom-right-radius: 57%;
}

.container div img:hover {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.