<div class='wrapper'>
<div class='link'>
<img class='image' src="https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8&w=1000&q=80" alt="">
</div>
<div class='link'>
<img class='image' src="https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8&w=1000&q=80" alt="">
</div>
<div class='link'>
<img class='image' src="https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8&w=1000&q=80" alt="">
</div>
<div class='link'>
<img class='image' src="https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8&w=1000&q=80" alt="">
</div>
<div class='link'>
<img class='image' src="https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8&w=1000&q=80" alt="">
</div>
<div class='link'>
<img class='image'src="https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8&w=1000&q=80" alt="">
</div>
<div class='link'>
<img class='image' src="https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8&w=1000&q=80" alt="">
</div>
<div class='link'>
<img class='image' src="https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8&w=1000&q=80" alt="">
</div>
<div class='link'>
<img class='image' src="https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8&w=1000&q=80" alt="">
</div>
</div>
.image {
border-radius: 8px;
box-shadow: inset 0 0 15px #000, 0 0 0 #000;
transition: all 0.3s easy-in-out;
cursor: pointer;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.wrapper {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
grid-auto-rows: 240px;
grid-auto-flow: dense;
gap: 10px;
transition: all 0.3s easy-in-out;
}
.wrapper:hover .image {
filter: grayscale(1);
}
.link:hover .image {
filter: grayscale(0);
}
.image:hover {
box-shadow: inset 0 0 0 #000, 0 8px 15px #000;
}
div:nth-child(5n) {
grid-column: span 2;
grid-row: span 2;
}
div:nth-child(4n) {
grid-row: span 2;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.