如何使用 CSS 网格在图像上应用描述？

Question

我正在尝试创建一个图像网格，当用户将鼠标悬停在该图像上时，该网格会在该图像的淡出版本上显示描述。我当前的进度可以在下方和此处 JSFiddle.

查看

div#grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 25px;
  width: 95%;
  margin: 15px auto;
  
  div {
    margin: auto;
    overflow: hidden;
    // cursor: pointer;
    background-color: black;
    color: white;
    
    img {
      height: auto;
      max-width: 100%;
    }
    
    p {
      display: none;
      position: relative;
      padding: 0;
      top: -40px;
      left: 10px;
      margin: 0;
    }
    
    &:hover {
      
      img {
        opacity: 0.35;
      }
      
      p {
        display: block;
      }
    }
  }
}

<h2>Grid Test</h2>
<div id="grid-container">
  <div class="">
    <img src="http://i.imgur.com/kEmy7gp.jpg" alt="A Rock" />
    <p>A beautiful rock structure.</p>
  </div>
  <div class="">
    <img src="http://i.imgur.com/kEmy7gp.jpg" alt="A Rock" />
    <p>A beautiful rock structure.</p>
  </div>
  <div class="">
    <img src="http://i.imgur.com/kEmy7gp.jpg" alt="A Rock" />
    <p>A beautiful rock structure.</p>
  </div>
  <div class="">
    <img src="http://i.imgur.com/kEmy7gp.jpg" alt="A Rock" />
    <p>A beautiful rock structure.</p>
  </div>
  <div class="">
    <img src="http://i.imgur.com/kEmy7gp.jpg" alt="A Rock" />
    <p>A beautiful rock structure.</p>
  </div>
  <div class="">
    <img src="http://i.imgur.com/kEmy7gp.jpg" alt="A Rock" />
    <p>A beautiful rock structure.</p>
  </div>
  <div class="">
    <img src="http://i.imgur.com/kEmy7gp.jpg" alt="A Rock" />
    <p>A beautiful rock structure.</p>
  </div>
  <div class="">
    <img src="http://i.imgur.com/kEmy7gp.jpg" alt="A Rock" />
    <p>A beautiful rock structure.</p>
  </div>
</div>

正如您在我的示例 JSFiddle 中看到的那样，我目前正在做的事情有这些令人讨厌的黑条，以及由于相对位置弹出而导致的大小调整问题。我可以使用 margin-bottom 摆脱相对的黑条，但它仍然无法解决我不必要的调整大小的问题。

理想情况下，我希望在图像上有一个完整的 div，这样我就可以在 div 中放置东西，但我不知道如何在不制作完整的情况下实现这一点混乱。我需要一些帮助，了解如何在以下限制条件下从逻辑上解决这个问题：

我宁愿不使用 JavaScript，但我不是 100% 反对它。但肯定没有框架。
我不想制作我div的图像background-image。
图片必须可以调整大小。（尽管值得注意的是图像的初始大小是已知的）

Answer 1

您可以做的是使用 :after 属性在 div 上放置一个半透明的深色背景图像并利用段落元素上的 position: absolute; 的用法。见下文和 this updated demo on JSFiddle. Read more about :after on MDN.

div {
    margin: auto;
    overflow: hidden;
    // cursor: pointer;
    color: white;
    position: relative;

    img {
      display: block;
      height: auto;
      max-width: 100%;
    }

    &:hover:after {
      position: absolute;
      display: block;
      content: '';
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(0,0,0,.25);
    }

    p {
      display: none;
      position: absolute;
      padding: 0;
      bottom: 10px;
      left: 10px;
      margin: 0;
      z-index: 1;
    }

Answer 2

你应该删除 div 中的背景色并将其放在 p 中，并将显示设置为在 p 中阻塞，不透明度为 0，悬停时将不透明度更改为 0.65，并且向 p 添加 padding-left 并减少 margin top:

    div#grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 25px;
  width: 95%;
  margin: 15px auto;

  div {
    margin: auto;
    overflow: hidden;
    // cursor: pointer;

    color: white;

    img {
      height: auto;
      max-width: 100%;
    }

    p {
      opacity: 0;
      position: relative;
      padding: 0;
      top: -20px;
      left: 0px;
      margin: 0;
      padding-left: 10px;
      background-color: black;
    }

    &:hover {

      img {
        opacity: 0.35;
      }

      p {
        opacity: 0.65;
      }
    }
  }
}

你甚至可以调整图像的不透明度，我会至少设置 0.75

Answer 3

问题的原因有两个。

问题 #1：`position: relative`

您的段落元素位于图像上方。

div#grid-container div p {
    display: none;
    position: relative;
    padding: 0;
    top: -40px;
    left: 10px;
    margin: 0;
}

问题在于相对定位不会从正常流中删除元素。因此，即使您使用 top 和 left 来定位文本，元素的原始 space 仍然存在 ()。

您需要从正常流中删除元素，这样它就不会在容器中占据 space。使用 position: absolute 并使用 position: relative.

使父级成为边界框

div {
    margin: auto;
    overflow: hidden;
    background-color: black;
    color: white;
    position: relative;  /* new */

p {
    display: none;
    position: absolute; /* adjusted */
    padding: 0;
    bottom: 40px;       /* adjusted */
    left: 10px;
    margin: 0;
}

revised demo 1

问题 #2：`vertical-align: baseline`

您的图像元素是网格项的子元素。这意味着他们不参与网格布局。它们存在于块布局中，其中内联级元素自动与 vertical-align 属性 (source).

对齐。

这就是图片下方有一个小间隙的原因 ()。

要解决此问题，请使用 vertical-align: top 覆盖默认值。

img {
  height: auto;
  max-width: 100%;
  vertical-align: top;  /* new */
}

revised demo 2

如何使用 CSS 网格在图像上应用描述？

How to apply a description over an image using CSS Grid?

html

css

sass

css-grid

问题 #1：`position: relative`

问题 #2：`vertical-align: baseline`

如何使用 CSS 网格在图像上应用描述？

How to apply a description over an image using CSS Grid?

html

css

sass

css-grid

问题 #1：position: relative

问题 #2：vertical-align: baseline

问题 #1：`position: relative`

问题 #2：`vertical-align: baseline`