css上划过图片出文字

CSS上划过图片出现文字效果，是一种常用于网页设计的交互效果。下面是如何使用CSS代码实现这个效果：

 <!--HTML结构-->
  <div class="container">
    <img src="your-image-url" alt="Your Image" class="img-hover">
    <div class="text">Your Text</div>
  </div>

  <!--CSS-->
  .img-hover {
    position: relative;
  }
  .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .5s ease-out;
  }
  .container:hover .text {
    opacity: 1;
  } 

首先，在HTML中我们需要一个包含图片和文字的容器div，图片使用img标签，文字使用div标签。为了实现效果，我们需要将图片的position属性设置为relative，以便让文字可以基于图片定位。

接下来，在CSS中我们将文字的position属性设置为absolute，以便于对其进行绝对定位。同时我们使用了transform属性将文字水平垂直居中，让它在图片中间显示。opacity属性设置文字的透明度为0，以便实现初始隐藏效果。最后，为了实现文字在鼠标滑过图片时出现，我们使用了:hover伪类，改变容器div的opacity属性，从而使文字出现。

通过以上CSS代码，就可以轻松实现图片上划过出现文字的效果。