<div class="container">
<a href="#"><img src="https://source.unsplash.com/200x200/?space" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/200x200/?frog" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/200x200/?mountain" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/200x200/?lion" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/200x200/?umbrella" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/200x200/?paint" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/200x200/?monster" alt=""></a>
<a href="#"><img src="https://source.unsplash.com/200x200/?wooly" alt=""></a>
</div>
body {
background: url("http://s15.postimage.org/veanrmv0r/purty_wood_3.png");
padding: 20px;
}
.container {
width: 90%;
max-width: 800px;
margin: 0 auto;
box-shadow: 0 2px 15px black;
border-radius: 3px;
background: #222;
display: flex;
flex-wrap: wrap;
}
li {
flex: 1 0 1;
}
a,
img {
display: block;
}
a {
transition: all 0.3s;
width: 25%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.container:hover > a {
filter: grayscale(1) blur(1px);
opacity: 0.4;
}
.container:hover > a:hover {
filter: none;
opacity: 1;
transform: scale(1.1);
z-index: 20;
}
This Pen doesn't use any external CSS resources.