响应式正方形网格上的透明覆盖

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <!-- more grid items -->
</div>

.grid-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
}

.grid-item {
  position: absolute;
  width: 100%;
  height: 100%;
}

const gridItems = document.querySelectorAll('.grid-item');

gridItems.forEach((item) => {
  item.addEventListener('mouseover', () => {
    item.classList.add('overlay');
  });

  item.addEventListener('mouseout', () => {
    item.classList.remove('overlay');
  });
});

.grid-item {
  /* previous styles */

  transition: opacity 0.3s ease;
}

.grid-item.overlay {
  opacity: 0.5;
}