<body>
  <div class="grid-container">
    <div class="grid-item">
      <div class="overlay"></div>
      1
    </div>
    <div class="grid-item">
      <div class="overlay"></div>
      2
    </div>
    <div class="grid-item">
      <div class="overlay"></div>
      3
    </div>
    <div class="grid-item">
      <div class="overlay"></div>
      4
    </div>
    <div class="grid-item">
      <div class="overlay"></div>
      5
    </div>
    <div class="grid-item">
      <div class="overlay"></div>
      6
    </div>
    <div class="grid-item">
      <div class="overlay"></div>
      7
    </div>
    <div class="grid-item">
      <div class="overlay"></div>
      8
    </div>
    <div class="grid-item">
      <div class="overlay"></div>
      9
    </div>
    <div class="grid-item">
      <div class="overlay"></div>
      10
    </div>
    <div class="grid-item">
      <div class="overlay"></div>
      11
    </div>
    <div class="grid-item">
      <div class="overlay"></div>
      12
    </div>
    <div class="grid-item">
      <div class="overlay"></div>
      13
    </div>
    <div class="grid-item">
      <div class="overlay"></div>
      14
    </div>
    <div class="grid-item">
      <div class="overlay"></div>
      15
    </div>
    <div class="grid-item">
      <div class="overlay"></div>
      16
    </div>
  </div>
</body>
</html>
body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.grid-item {
  position: relative;
  background-color: #3498db;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  height: 100px;
  width: 100px; */
  transition: transform 0.5s ease;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(6, 24, 64, 0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.grid-item:hover .overlay {
  opacity: 1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.