css中悬浮文字上显示图片

让文字悬浮在图片上，是网页设计中常见的效果之一。通过 CSS，我们可以实现这个效果，并让悬浮的文字上方显示出图片。下面是具体的代码实现：

.hover-image {
  position: relative;
  display: inline-block;
}

.hover-image img {
  display: block;
  max-width: 100%;
}

.hover-image p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 10px;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

.hover-image:hover p {
  opacity: 1;
} 

以上代码中，我们首先定义一个父容器，通过相对定位将图片包裹在该容器内。图片本身使用 max-width: 100% 将其宽度限制在容器内。

接着我们定义一个文字容器，将其绝对定位在图片上方的 50% 处，并通过 transform 将其向上向左移动 50%。文字容器的背景色使用半透明白色，以突出显示文字。我们还对文字容器设置了圆角和阴影，使其具有更好的视觉效果。

最后，通过设置文字容器的 opacity 属性，并在鼠标悬浮时将其设置为 1，就可以实现鼠标悬浮时显示图片文字的效果了。

总之，这个效果在网页设计中比较实用，可以让页面更具视觉效果。如果你也喜欢这个效果，赶紧动手试一试吧！