时间戳

首页 > 解决方案 > CSS：将文本放置在 Flexbox 中的图像上

html - CSS：将文本放置在 Flexbox 中的图像上

问题描述

我有一个带有 3 个图像的 flexbox，我已经可以将它们塑造成具有相同的宽度和高度。现在我想添加一个在每个图像中居中的文本。我的最终目标是添加悬停效果，以便文本出现在悬停时。

从其他一些教程中，我认为我需要将该段落添加到另一个 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>

标签： htmlcss

解决方案

这是你要求的吗？

.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>

推荐阅读