CSS：在Flexbox中将文本定位在图像上方

Question

我有一个flexbox，其中包含3个图片，我已经将它们设置为相同的宽度和高度。现在我想添加一个文本，使其位于每个图像的中心。我的最终目标是添加悬停效果，以便在悬停时显示文本。

通过其他一些教程，我发现需要将段落添加到另一个div中。但是，我无法将文本容器“重叠”在相应的图像上方。有没有什么提示或技巧可以最好地实现这一点呢？

.flexbox {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  max-height: 80vh;
}

.container {
  width: 34%;
  max-height: 70vh;
  display: block;
  text-align: center;
}

.image-category {
  width: 100%;
  opacity: 0.6;
  max-height: inherit;
  overflow: hidden;
}

<div class="flexbox" id="flex">

  <div class="container" id="box1">
    <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 1</p>
    </div>
  </div>

  <div class="container" id="box2">
    <img class="image-category" id="product2" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 2</p>
    </div>
  </div>

  <div class="container" id="box3">
    <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 3</p>
    </div>

  </div>

- Michaela P.

Answer 1

这是你要求的内容吗？

.flexbox{
position: relative;
display: flex;
flex-direction: row;
width: 100%;
max-height: 80vh;
}

.container{
  cursor: pointer;
  width: 34%;
  max-height: 70vh;
  display:block;
  text-align: center;

}

.image-category{
  width: 100%;
  opacity: 1;
  max-height: inherit;
  transition:  0.5s;
  overflow: hidden;
}

.image-description{
  transform: translateY(-50vh);
  font-size: 25px;
  font-family: 'Comic Sans MS';
  font-weight: 900;
  opacity: 0;
  transition:  0.6s;
}

.container:hover .image-description{
  opacity: 100;
}

.container:hover .image-category{
  opacity: 0.6;
}

<div class="flexbox" id="flex">

        <div class="container" id="box1">
          <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
          <div class="image-description">
            <p class="description">Example 1</p>
          </div>
        </div>

        <div class="container" id="box2">
          <img class="image-category" id="product2" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
          <div class="image-description">
            <p class="description">Example 2</p>
          </div>
        </div>

        <div class="container" id="box3">
          <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
          <div class="image-description">
            <p class="description">Example 3</p>
          </div>

</div>

- Jaysmito Mukherjee

Answer 2

将描述部分的定位设置为绝对位置，容器部分的定位设置为相对位置。

.flexbox {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  max-height: 80vh;
}

.container {
  width: 34%;
  max-height: 70vh;
  display: block;
  text-align: center;
  position: relative;
}

.image-category {
  width: 100%;
  opacity: 0.6;
  max-height: inherit;
  overflow: hidden;
}
.description {
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity:0;
  }
 .container:hover .description {
  opacity:100; 
 }

<div class="flexbox" id="flex">

  <div class="container" id="box1">
    <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 1</p>
    </div>
  </div>

  <div class="container" id="box2">
    <img class="image-category" id="product2" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 2</p>
    </div>
  </div>

  <div class="container" id="box3">
    <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 3</p>
    </div>

  </div>

- Lety

Answer 3

我会使用flexbox在容器上，并更改文本的显示属性来处理这个问题。使用Flexbox可以更轻松地水平和垂直对齐文本。代码有注释。

.flexbox {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  max-height: 80vh;
}

.container {
  width: 34%;
  max-height: 70vh;
  display: flex;
  flex-flow: row nowrap;
  /*horizontal alignment*/
  text-align: center;
  justify-content: center;
  /*vertical alignment*/
  align-items: center;
}

.image-category {
  width: 100%;
  opacity: 0.6;
  max-height: inherit;
  overflow: hidden;
}
/*absolute works because there is no other positioning applied to the text. As long as it stays that way the text is still responding to the flexbox properties even if its technically removed from the flexbox */
.image-description {
  position: absolute;
  display: none;
}
.container:hover {
  cursor: pointer;
}
.container:hover .image-description{
  display: block;
}

<div class="flexbox" id="flex">
  <div class="container" id="box1">
    <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 1</p>
    </div>
  </div>

  <div class="container" id="box2">
    <img class="image-category" id="product2" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 2</p>
    </div>
  </div>

  <div class="container" id="box3">
    <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 3</p>
    </div>

  </div>

- Warden330

Answer 4

我认为你可以这样做

  .flexbox {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  max-height: 80vh;
}

.container {
  width: 34%;
  max-height: 70vh;
  display: block;
  text-align: center;
  position: relative;
}

.image-category {
  width: 100%;
  opacity: 0.6;
  max-height: inherit;
  overflow: hidden;
}
.image-description{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="flexbox" id="flex">

    <div class="container" id="box1">
      <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
      <div class="image-description">
        <p class="description">Example 1</p>
      </div>
      
    </div>
  
    <div class="container" id="box2">
      <img class="image-category" id="product2" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
      <div class="image-description">
        <p class="description">Example 2</p>
      </div>
    </div>
  
    <div class="container" id="box3">
      <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
      <div class="image-description">
        <p class="description">Example 3</p>
      </div>
  
    </div>

- Sato Takeru

Answer 5

这是你问题的答案。 你可以将文本放在图片上，并保持其位置为绝对位置。下面是代码。

.flexbox {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  max-height: 80vh;
}

.container {
  width: 34%;
  max-height: 70vh;
  display: block;
  text-align: center;
}

.image-category {
  width: 100%;
  opacity: 0.6;
  max-height: inherit;
  overflow: hidden;
}

**.description {
  position: absolute;
  top: 50%;
  margin-left: 13%;
  bottom: 50%;
  display: none;
}

.container:hover .description {
  display: block;
}

**

<div class="flexbox" id="flex">

  <div class="container" id="box1">
    <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 1</p>
    </div>
  </div>

  <div class="container" id="box2">
    <img class="image-category" id="product2" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 2</p>
    </div>
  </div>

  <div class="container" id="box3">
    <img class="image-category" id="product3" src="https://img.fotocommunity.com/landschaft-geht-auch-hochkant-0d77b881-6996-4001-bbd4-74ec6b27f14e.jpg?height=1080">
    <div class="image-description">
      <p class="description">Example 3</p>
    </div>

- Rohan Das