Question

所以我试图制作一个包含描述覆盖每个图像的循环图像。当图片悬停时，叠加层将是可见的。以下是代码示例。

.container {
  height: 100px;
  width:100px;
  display: inline-block;
}

.picture {
  height: 100%;
  width:100%
}

.contAlign {
  text-align: center;
}

.desc {
  position:flex;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: black;
  width: 100%;
  height: 0%;
  opacity: 0.5;
  transition: .5s ease;
}

.container:hover .desc {
  height: 40%;
  
}

<div class="contAlign">
  <div class="container">
    <img class="picture" src="https://kbob.github.io/images/sample-3.jpg">
    <div class="desc"></div>
  </div>

  <div class="container">
    <img class="picture" src="https://imagej.nih.gov/ij/images/baboon.jpg">
    <div class="desc"></div>
  </div>

  <div class="container">
    <img class="picture" src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png">
    <div class="desc"></div>
  </div>
</div>

在这种情况下，描述框向下，因为我没有使用position：absolute;。但是，如果我这样做，该框将不会继承图片大小并占用页面的大小。我该如何解决这个问题？

FIDDLE

Answer 1

我希望这会帮助你。一旦你使一个元素绝对，只要确保使其父亲相对。这样它就不会漂浮在任何地方。现在，您可以相应地设置位置，使其显示在悬停状态。

＆＃13;

.container {
  height: 100px;
  width:100px;
  display: inline-block;
  position: relative;
}

.picture {
  height: 100%;
  width:100%
}

.contAlign {
  text-align: center;
}

.desc {
  position:absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: black;
  width: 100%;
  height: 0%;
  opacity: 0.5;
  transition: .5s ease;
}

.container:hover .desc {
  height: 40%;
}

＆＃13;

<div class="contAlign">
  <div class="container">
    <img class="picture" src="https://kbob.github.io/images/sample-3.jpg">
    <div class="desc"></div>
  </div>

  <div class="container">
    <img class="picture" src="https://imagej.nih.gov/ij/images/baboon.jpg">
    <div class="desc"></div>
  </div>

  <div class="container">
    <img class="picture" src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png">
    <div class="desc"></div>
  </div>
</div>

＆＃13;

Answer 2

将container的位置设置为relative，以便desc与此相关的绝对值是绝对的：

.container {
  height: 100px;
  width:100px;
  display: inline-block;
  position:relative;
}

.picture {
  height: 100%;
  width:100%
}

.contAlign {
  text-align: center;
}

.desc {
  position:absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: black;
  width: 100%;
  height: 0%;
  opacity: 0.5;
  transition: .5s ease;
}

.container:hover .desc {
  height: 40%;
  
}

<div class="contAlign">
  <div class="container">
    <img class="picture" src="https://kbob.github.io/images/sample-3.jpg">
    <div class="desc"></div>
  </div>

  <div class="container">
    <img class="picture" src="https://imagej.nih.gov/ij/images/baboon.jpg">
    <div class="desc"></div>
  </div>

  <div class="container">
    <img class="picture" src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png">
    <div class="desc"></div>
  </div>
</div>

覆盖多个div图片

2 个答案: