在图像悬停时显示div over image

是一种常见的前端开发技术，用于在用户将鼠标悬停在图像上时，在图像的上方显示一个浮动层或者弹出框。这种交互方式可以增加网页的可视化效果，提升用户体验。

实现这一效果的常见做法是通过CSS和JavaScript来控制。具体步骤如下：

HTML结构：在HTML中，需要包含一个包裹图像和div的容器，可以使用div元素作为容器，并在其中插入一个img元素和一个用于显示悬停内容的div元素。

<div class="image-container">
  <img src="image.jpg" alt="Image">
  <div class="hover-content">
    <!-- 悬停时显示的内容 -->
  </div>
</div>

CSS样式：使用CSS来定义图像容器和悬停内容的样式。可以设置图像容器为相对定位（position: relative），悬停内容为绝对定位（position: absolute），并通过设置top、left、width、height等属性来控制悬停内容的位置和大小。

.image-container {
  position: relative;
}

.hover-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* 悬停内容的背景颜色 */
  color: #fff; /* 悬停内容的文字颜色 */
  opacity: 0; /* 初始时设置为透明，不显示 */
  transition: opacity 0.3s; /* 设置过渡效果，使显示/隐藏平滑 */
}

.image-container:hover .hover-content {
  opacity: 1; /* 鼠标悬停时显示悬停内容 */
}