<div class="items">
  <div class="item" data-image="path/to/image1.jpg"></div>
  <div class="item" data-image="path/to/image2.jpg"></div>
  <div class="item" data-image="path/to/image3.jpg"></div>
  <div class="item" data-image="path/to/image4.jpg"></div>
</div>
<div class="image-container">
  <img class="image" src="">
</div>

.items {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

.image-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
}

.image-container .image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 80%;
}

const items = document.querySelectorAll('.item');
const imageContainer = document.querySelector('.image-container');
const image = document.querySelector('.image-container .image');

let currentImage = null;

items.forEach(item => {
  item.addEventListener('mouseenter', () => {
    const imageUrl = item.getAttribute('data-image');
    image.setAttribute('src', imageUrl);
    imageContainer.style.display = 'block';
    currentImage = imageUrl;
  });
});

items.forEach(item => {
  item.addEventListener('mouseleave', () => {
    if (currentImage === item.getAttribute('data-image')) {
      imageContainer.style.display = 'none';
    }
  });
});

imageContainer.addEventListener('click', () => {
  imageContainer.style.display = 'none';
});