如何仅在特定的 CSS flexbox 列上进行覆盖拉伸？

Question

我正在尝试获得这种效果：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_slideleft - 但只是为了让相应的列覆盖在 flexbox 中。

.flexContainer {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  position: relative;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0%;
  height: 100%;
  transition: .5s ease;
}

.Flex-item:hover .overlay {
  width: 100%;
}

.Flex-item {
  border: 5px red solid;
}

<div class="flexContainer">

  <div class="Flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non aliquam lectus. Ut sed orci tincidunt, consectetur neque in, suscipit urna. In vitae fringilla nunc. Praesent sodales metus ex, nec posuere est condimentum eget. Praesent cursus
    augue in quam efficitur, vitae sollicitudin ligula ultricies. Donec fermentum ex id laoreet volutpat. Nunc vitae convallis lacus, ut ullamcorper nisl. Pellentesque pharetra efficitur ipsum a congue.

    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>

  <div class="Flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non aliquam lectus. Ut sed orci tincidunt, consectetur neque in, suscipit urna. In vitae fringilla nunc. Praesent sodales metus ex, nec posuere est condimentum eget. Praesent cursus
    augue in quam efficitur, vitae sollicitudin ligula ultricies. Donec fermentum ex id laoreet volutpat. Nunc vitae convallis lacus, ut ullamcorper nisl. Pellentesque pharetra efficitur ipsum a congue.

    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>

  <div class="Flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non aliquam lectus. Ut sed orci tincidunt, consectetur neque in, suscipit urna. In vitae fringilla nunc. Praesent sodales metus ex, nec posuere est condimentum eget. Praesent cursus
    augue in quam efficitur, vitae sollicitudin ligula ultricies. Donec fermentum ex id laoreet volutpat. Nunc vitae convallis lacus, ut ullamcorper nisl. Pellentesque pharetra efficitur ipsum a congue.

    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>
</div>

我的代码：https://jsfiddle.net/rwkLa2x5/2/

我该怎么做？

Answer 1

基于您希望 .overlay 元素仅覆盖其父元素 .Flex-item 的理解，我的建议是使用 transform 定位和移动元素：

.flexContainer {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  position: relative;
}

.overlay {
  position: absolute;
  background-color: #008CBA;
  transition: transform 0.5s ease;
  /* moving the element along its x-axis (left/right)
     to the left (negative) 100% of the element's own
     width: */
  transform: translateX(-100%);
  /* setting a 0 length inset from the top, right,
     bottom and left sides of the parent element: */
  inset: 0;
}

.Flex-item {
  border: 5px red solid;
  /* in order to position the descendant .overlay
     element in relation to this element: */
  position: relative;
  overflow: hidden;
}

.Flex-item:hover .overlay {
  /* when the parent is hovered we position the element in
     its default state by setting the x-axis translation
     back to 0: */
  transform: translateX(0);
}

<div class="flexContainer">

  <div class="Flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non aliquam lectus. Ut sed orci tincidunt, consectetur neque in, suscipit urna. In vitae fringilla nunc. Praesent sodales metus ex, nec posuere est condimentum eget. Praesent cursus
    augue in quam efficitur, vitae sollicitudin ligula ultricies. Donec fermentum ex id laoreet volutpat. Nunc vitae convallis lacus, ut ullamcorper nisl. Pellentesque pharetra efficitur ipsum a congue.

    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>

  <div class="Flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non aliquam lectus. Ut sed orci tincidunt, consectetur neque in, suscipit urna. In vitae fringilla nunc. Praesent sodales metus ex, nec posuere est condimentum eget. Praesent cursus
    augue in quam efficitur, vitae sollicitudin ligula ultricies. Donec fermentum ex id laoreet volutpat. Nunc vitae convallis lacus, ut ullamcorper nisl. Pellentesque pharetra efficitur ipsum a congue.

    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>

  <div class="Flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non aliquam lectus. Ut sed orci tincidunt, consectetur neque in, suscipit urna. In vitae fringilla nunc. Praesent sodales metus ex, nec posuere est condimentum eget. Praesent cursus
    augue in quam efficitur, vitae sollicitudin ligula ultricies. Donec fermentum ex id laoreet volutpat. Nunc vitae convallis lacus, ut ullamcorper nisl. Pellentesque pharetra efficitur ipsum a congue.

    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>
</div>

JS Fiddle demo.

如何仅在特定的 CSS flexbox 列上进行覆盖拉伸？

How to make an overlay stretch only over a specific CSS flexbox column?

html

css

overlay

flexbox