在悬停的Div中使长方体阴影出现在Img上

，可以通过CSS的伪元素和定位来实现。

首先，需要给悬停的Div设置一个相对定位（position: relative），然后在该Div内部创建一个子元素，用于表示长方体阴影。可以使用伪元素::before或::after来创建这个子元素。

接下来，给这个子元素设置绝对定位（position: absolute），并设置宽度、高度、背景颜色和阴影效果。可以使用CSS的box-shadow属性来添加阴影效果。

然后，将这个子元素放置在Img上方，可以通过设置top和left属性来调整位置，使其覆盖在Img上方。

最后，使用CSS的过渡效果（transition）来实现平滑的阴影出现和消失效果。

以下是一个示例代码：

HTML:

<div class="container">
  <img src="image.jpg" alt="Image">
  <div class="shadow"></div>
</div>

CSS:

.container {
  position: relative;
  display: inline-block;
}

.container:hover .shadow {
  opacity: 1;
}

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

在上述代码中，.container是悬停的Div的类名，.shadow是表示长方体阴影的子元素的类名。通过设置.container:hover .shadow来实现在悬停时显示阴影。

这种效果可以应用于图片展示、产品展示等场景中，通过给图片添加阴影效果，可以增加图片的立体感和吸引力。

腾讯云相关产品和产品介绍链接地址：