初始状态页面显示3幅小图，当光标移动到小图上时，显示该图的大图和标题。当光标在小图所在的范围内移动时，大图和标题也跟着光标移动。当光标移出小图时，大图和标题不再显示。

这个功能可以通过HTML、CSS和JavaScript实现。以下是一种实现方式：

HTML部分：

<div class="image-container">
  <div class="image">
    <img src="small-image-1.jpg" alt="Small Image 1">
    <div class="title">Small Image 1 Title</div>
  </div>
  <div class="image">
    <img src="small-image-2.jpg" alt="Small Image 2">
    <div class="title">Small Image 2 Title</div>
  </div>
  <div class="image">
    <img src="small-image-3.jpg" alt="Small Image 3">
    <div class="title">Small Image 3 Title</div>
  </div>
</div>
<div class="big-image-container">
  <img class="big-image" src="">
  <div class="big-image-title"></div>
</div>

CSS部分：

.image-container {
  display: flex;
  justify-content: space-between;
}

.image {
  position: relative;
}

.title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s ease-in-out;
}

.image:hover .title {
  visibility: visible;
  opacity: 1;
}

.big-image-container {
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s ease-in-out;
}

.big-image {
  max-height: 90vh;
  max-width: 90vw;
  display: block;
  margin: auto;
}

.big-image-title {
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 1em;
}

JavaScript部分：

const smallImages = document.querySelectorAll('.image');
const bigImageContainer = document.querySelector('.big-image-container');
const bigImage = document.querySelector('.big-image');
const bigImageTitle = document.querySelector('.big-image-title');

let currentImage = null;

smallImages.forEach((smallImage) => {
  smallImage.addEventListener('mouseenter', () => {
    const smallImageRect = smallImage.getBoundingClientRect();
    bigImageContainer.style.top = `${smallImageRect.top}px`;
    bigImageContainer.style.left = `${smallImageRect.right + 10}px`;
    bigImage.setAttribute('src', smallImage.querySelector('img').getAttribute('src'));
    bigImageTitle.textContent = smallImage.querySelector('.title').textContent;
    bigImageContainer.style.visibility = 'visible';
    bigImageContainer.style.opacity = 1;
    currentImage = smallImage;
  });
});

document.addEventListener('mousemove', (event) => {
  if (currentImage) {
    const currentImageRect = currentImage.getBoundingClientRect();
    if (event.clientX < currentImageRect.left || event.clientX > currentImageRect.right || event.clientY < currentImageRect.top || event.clientY > currentImageRect.bottom) {
      bigImageContainer.style.visibility = 'hidden';
      bigImageContainer.style.opacity = 0;
      currentImage = null;
    } else {
      bigImageContainer.style.top = `${event.clientY}px`;
      bigImageContainer.style.left = `${event.clientX + 10}px`;
    }
  }
});

这段代码的作用是，当鼠标移动到小图上时，获取小图的位置和标题，显示大图和标题，并将当前小图保存到变量中。当鼠标在小图范围内移动时，大图和标题跟随鼠标移动。当鼠标移出小图时，隐藏大图和标题，并清空当前小图变量。