图片div 悬浮【代码示例】

当我们在网页中需要实现图片悬浮效果时，可以使用CSS的position属性来控制图片的位置。通过设置position为relative或absolute，结合top、bottom、left、right属性，可以使图片相对于其默认位置进行偏移，从而实现悬浮效果。

例如，我们可以创建一个包含图片的div，并设置其position为relative，然后使用top和left属性来调整图片的位置。当鼠标悬浮在该div上时，我们可以使用CSS的:hover伪类选择器来改变图片的样式，如改变图片的透明度或添加阴影效果。

示例代码如下：

HTML部分：

<div class="b693-f239-2274-f274 image-container">
  <img src="example.jpg" alt="Example Image">
</div>

CSS部分：

.image-container {
  position: relative;
  width: 200px;
  height: 200px;
}
.image-container:hover img {
  opacity: 0.8;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.image-container img {
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
}

在上述示例中，我们创建了一个名为image-container的div，其中包含了一个img标签用于显示图片。通过设置image-container的position为relative，我们可以在其内部使用top和left属性来调整图片的位置。当鼠标悬浮在image-container上时，我们使用:hover伪类选择器来改变img标签的样式，设置其透明度为0.8，并添加一个阴影效果。我们还为img标签设置了一个过渡效果，使其在改变样式时有一个平滑的过渡。

通过上述代码，我们实现了一个图片div悬浮的效果，当鼠标悬浮在该div上时，图片会有一定的样式变化，从而呈现出悬浮效果。