css 鼠标移动时 图片从左到右 从右到左出现

你可以使用CSS3的`transform`属性来实现鼠标移动时图片从左到右、从右到左出现的效果。以下是一个简单的示例代码：

<div class="image-container">
  <img src="your-image-url" alt="your-image-alt" class="img">
</div>

.image-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-out;
}

.image-container:hover .img {
  transform: translateX(100%);
}

.image-container:hover .img:hover {
  transform: translateX(-100%);
}

在这个例子中，我们定义了一个包含图片的容器，并使用了`position: relative`将其设置为相对定位。`.img`类定义了图片的样式，并使用了`position: absolute`将其设置为绝对定位。`transition`属性定义了过渡效果。

在`.image-container:hover .img`选择器中，我们使用了`transform: translateX(100%)`将图片从左到右出现。在`.image-container:hover .img:hover`选择器中，我们使用了`transform: translateX(-100%)`将图片从右到左出现。

请注意，该方法只是一个简单的示例，你可以根据自己的需求调整代码。