<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.