如何使用CSS Grid对图像应用描述？

Question

我正在尝试创建一个图像网格，当用户将鼠标悬停在所述图像上时，该网格会在淡出的图像版本上显示描述。我目前的进展情况可以在下面和JSFiddle看到。

＆＃13;

＆＃13;

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;
      }
    }
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

理想情况下，我希望在图像上有一个完整的div，这样我就可以将内容定位在div中，但我不知道如何在不完全混乱的情况下实现这一目标。我希望得到一些帮助，我可以通过以下约束逻辑地解决这个问题：

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

Answer 1

这个问题有两个原因。

问题＃1：position: relative

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

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

问题是相对定位不会从正常流中删除元素。因此，即使您使用top和left来定位文本，元素的原始空间仍然存在（full explanation）。

您需要从正常流中移除元素，以便它不占用容器中的空间。使用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）进行基线对齐。

这就是为什么图像下面有一个小间隙（full explanation）。

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

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

revised demo 2

Answer 2

你可以做什么，是使用:after上的div属性将半透明的深色背景放在图像上方，段落元素position: absolute;。请参阅下文和JSFiddle上的this updated demo。详细了解MDN上的:after。

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 3

你应该删除div中的背景颜色并将其放在p中，并将显示设置为p，阻挡不透明度为0，悬停时将不透明度更改为0.65，并添加填充左边p并减少保证金顶部：

    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