css hover 某块区域 图片从左到右显示

可以使用CSS3的transition和transform来实现hover时图片从左到右显示的效果。具体步骤如下：

1. 首先，在HTML中添加需要hover的元素和对应的图片，例如：

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

2. 在CSS中设置初始状态的样式，包括图片的宽度和高度，以及容器的宽度和高度。例如：

.image-container {
  width: 200px;
  height: 200px;
  overflow: hidden; /* 隐藏超出容器的部分 */
}

img {
  width: 100%;
  height: 100%;
  transform: translateX(-100%); /* 初始状态将图片移动到容器左侧 */
  transition: transform 0.5s ease; /* 添加过渡效果 */
}

3. 接着，使用:hover伪类来设置hover时的样式，将图片移动到容器中间。例如：

img:hover {
  transform: translateX(0); /* hover时将图片移动到容器中间 */
}

完整代码如下：

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

<style>
.image-container {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

img:hover {
  transform: translateX(0);
}
</style>