HTML Flexbox 画廊

Question

我正在尝试制作一个响应式 9×9 画廊，在悬停时带有叠加层(尝试使用带有颜色和文本的 div)。像这样:Slide in Overlay from the Bottom .

但是，我不能完全覆盖图像。现在，我正在尝试使用 Flexbox，但我也不明白。

带有图像的 HTML 看起来像这样:

<div class="container">
  <div class="grid">

    <div class="cell">
      <div class="overlay"></div><img src="img/Portrait.jpg" alt="Project 01" class="image left"></div>
    <div class="cell">
      <div class="overlay"></div><img src="img/Portrait.jpg" alt="Project 02" class="image middle"></div>
    <div class="cell">
      <div class="overlay"></div><img src="img/Portrait.jpg" alt="Project 03" class="image right"></div>
    <div class="cell">
      <div class="overlay"></div><img src="img/Portrait.jpg" alt="Project 04" class="image left"></div>
    <div class="cell">
      <div class="overlay"></div><img src="img/Portrait.jpg" alt="Project 05" class="image middle"></div>
    <div class="cell">
      <div class="overlay"></div><img src="img/Portrait.jpg" alt="Project 06" class="image right"></div>
    <div class="cell">
      <div class="overlay"></div><img src="img/Portrait.jpg" alt="Project 07" class="image left"></div>
    <div class="cell">
      <div class="overlay"></div><img src="img/Portrait.jpg" alt="Project 08" class="image middle"></div>
    <div class="cell">
      <div class="overlay"></div><img src="img/Portrait.jpg" alt="Project 09" class="image right"></div>

  </div>
</div>

我目前使用的 CSS 是这样的:

.container {
  margin: 0 auto;
  max-width: 100%;
  padding: 0;
  background-color: red;
}

img {
  padding: 2px;
  display: block;
  max-width: 100%;
  z-index: 1;
}

.cell {
  margin: 0;
  padding: 0;
}

.overlay {
  padding: 0px;
  display: block;
  position: relative;
  background-color: black;
  width: 100%;
  height: 100%;
  z-index: 10;
}

媒体查询:

@media screen and (min-width: 600px) {
  .grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
  .cell {
    width: 50%;
  }
}

@media screen and (min-width: 1000px) {
  .cell {
    width: calc(100% / 3);
  }
}

目前，超过1000px的看起来是这样的:

红色是 Flexboxgrid(原始位置)class="grid"。紫色是图片(当前丢失位置)，黑色(不透明度 0.5)与红色网格完全匹配。

如何在图像上将 overlay-divs 与相同的 2px 填充完全匹配？

Answer 1

一般的想法是相对于 .cell 将叠加层完全定位在图像上，然后使用 translateY() 将其移出 。 .cell:hover

上的单元格 和转换 translateY()

.container {
  margin: 0 auto;
  max-width: 100%;
  padding: 0;
  background-color: red;
}

img {
  padding: 2px;
  display: block;
  max-width: 100%;
  z-index: 1;
}

.grid {
  display: flex;
  flex-wrap: wrap;
}

.cell {
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.overlay {
  padding: 0px;
  display: block;
  position: relative;
  background-color: black;
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 0; left: 0;
  transform: translateY(100%);
  transition: transform .5s;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cell:hover .overlay {
  transform: translateY(0);
}

<div class="container">
  <div class="grid">
    <div class="cell">
      <div class="overlay">text</div>
      <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png" alt="Project 01" class="image left">
    </div>
    <div class="cell">
      <div class="overlay">text</div>
      <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png" alt="Project 01" class="image left">
    </div>
    <div class="cell">
      <div class="overlay">text</div>
      <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png" alt="Project 01" class="image left">
    </div>
</div>