<div class="container">
<div class="grid">
<div class="background"></div>
<div class="background"></div>
<div class="background"></div>
<div class="background"></div>
</div>
</div>
body {
background-color: #222;
}
.container {
max-width: 992px;
margin: 0 auto;
padding: 0 16px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 24px;
position: relative;
}
.background {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 250px;
&:nth-child(1) {
background-image: url('https://w.wallhaven.cc/full/x8/wallhaven-x8ye3z.jpg');
}
&:nth-child(2) {
background-image: url('https://w.wallhaven.cc/full/6o/wallhaven-6ozkzl.jpg');
}
&:nth-child(3) {
background-image: url('https://w.wallhaven.cc/full/wq/wallhaven-wqve97.png');
}
&:nth-child(4) {
background-image: url('https://w.wallhaven.cc/full/v9/wallhaven-v9v3r5.jpg');
}
&:hover {
height: 100%;
position: absolute;
z-index: 1;
width: 100%;
left: 0;
top: 0;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.