如何使图像在悬停在网格中的另一个图像上时出现？CSS

<div class="grid-container">
  <div class="grid-item">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2" class="hover-image">
  </div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 定义3列 */
  grid-template-rows: repeat(2, 1fr); /* 定义2行 */
  gap: 10px; /* 定义网格间隔 */
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图像填充整个容器 */
}

.grid-item:hover .hover-image {
  opacity: 1; /* 设置悬停时的图像透明度为1，显示出来 */
}
.hover-image {
  opacity: 0; /* 设置初始图像透明度为0，隐藏起来 */
  transition: opacity 0.3s ease; /* 添加过渡效果 */
}