单击缩略图后主图像上的javascript滑块不透明效果

<div class="image-container">
  <img class="thumbnail" src="thumbnail.jpg" alt="Thumbnail Image">
  <div class="slider"></div>
  <img class="main-image" src="main-image.jpg" alt="Main Image">
</div>

.image-container {
  position: relative;
}

.thumbnail {
  width: 100px;
  height: 100px;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.main-image {
  width: 500px;
  height: 500px;
}

.image-container:hover .slider {
  opacity: 1;
}

const thumbnail = document.querySelector('.thumbnail');
const slider = document.querySelector('.slider');

thumbnail.addEventListener('click', () => {
  slider.style.opacity = '1';
});