<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.