css 图片上方弹出气泡

在网页设计中，我们有时需要在图片上方添加一些说明文字，为了让用户更加明确地了解图片所展示的内容，我们可以使用CSS实现图片上方弹出气泡。下面是实现过程：

/* CSS代码 */
.popover {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.popover:hover::after {
  content: "";
  display: block;
  position: absolute;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
  padding: 10px;
  z-index: 1;
}

.popover:hover::after {
  top: -50px;
}

.popover:hover::after {
  left: 50%;
  transform: translateX(-50%);
}

首先，我们需要为图片设置一个相对定位的父级元素，让气泡可以根据此元素的位置进行定位。然后，我们利用伪类::after在鼠标移入父元素时创建气泡。使用content属性添加气泡中的文字，设置背景颜色，边框样式和圆角等。设置z-index属性使气泡可以覆盖图片。

在此基础上，我们根据气泡与图片的距离和定位需要，使用top和left属性来调整气泡的位置和左右居中。至此，我们就可以实现图片上方弹出气泡的效果。