隐藏图像的左半部分并在图像悬停时显示左半部分

Question

我只需要两张照片，每张照片的一半（左半边从左图可见。右半边从右图可见）两张图像彼此面对。 当悬停在左侧图像上时，它显示它的右半部分并消失右侧图像。 当悬停在右图上时，它显示它是左半边，左图消失。

我尝试使用overflow:hidden 和direction:rtl 隐藏右侧图像的左侧。默认隐藏右侧。 因此，当我将鼠标悬停在左侧图像上时，它可以完美运行并从右侧显示隐藏部分。 但是当我将鼠标悬停在左侧图像上时，我无法从左侧获取隐藏部分。

.imagea {
  max-width: 250px;
  overflow: hidden;
  transition: 2s;
}

.imageb {
  max-width: 250px;
  overflow: hidden;
  direction: rtl;
  transition: 2s;
}

.imagea:hover {
  max-width: 100%;
}

.imagea:hover~.imageb {
  max-width: 0px;
}

.imageb:hover {
  max-width: 100%;
}

.imageb:hover .imagea {
  max-width: 0px;
}

<div class="imagea">
  <img src="https://via.placeholder.com/250" />
</div>
<div class="imageb">
  <img src="https://via.placeholder.com/250" />
</div>

Answer 1

可以通过CSS specificty 和adjacent sibling combinator（即+）实现纯CSS 解决方案。

您可以使用flex box 将两个img 元素包含在.images 容器中，以简化每个图像的水平放置（即在“行轴”上）。默认情况下，设置每个图像的样式，以便：

• 占据.images容器宽度的50%
• 占据容器高度的 100%
• 使用object-position 将自然图像与该图像元素边界的相应边对齐

使用:hover 伪类，更新图像元素的宽度，以便：

• 悬停.images 容器会导致.right 图像占据容器的整个宽度，.left 图像不占用空间（第一种情况）
• 或者，悬停.left 图像（比之前的悬停情况更具体）导致.left 图像占据容器的整个宽度，.right 图像不占空间（第二种情况）

在代码中可以这样实现：

.images {
  width:250px;
  height:250px;
  display:flex;
  flex-direction:row;
}

/* Default state of image element */
.images img {
  width:50%;
  height:100%;
  object-fit:cover;      
  transition:width ease-in-out 0.5s;
}

/* Default placement of image relative to box boundary */
.left {
  object-position:left;
}
.right {
  object-position:right;
}

/* Hover behavior for first case */
.images:hover .left {
  width:0;
}
.images:hover .right {
  width:100%;
}

/* Hover behavior for second case */
.images .left:hover {
  width:100%;
}
.images .left:hover + .right {
  width:0;
}

<div class="images">
  <img class="left" src="https://via.placeholder.com/250/FFFF00" />
  <img class="right" src="https://via.placeholder.com/250/FF00FF" />
</div>

希望有帮助！