图像卡片悬停效果宽度问题

Question

在下面的代码中，我有一个带有悬停效果的图像卡片。悬停时，我希望黑框默认覆盖完整图像。在下面的代码中，黑框不会覆盖完整的图像，除非标题或描述文本在第二行换行。

让黑框填满 parent 元素“.page-card”的完整宽度的最佳方法是什么，即使里面没有内容？我试过：

width: 100%, flex direction, clears, table hacks, 以及我发现的许多其他技巧都没有运气。任何帮助将不胜感激。

快速说明：对于 .page-card figcaption，我使用的是网站上的图片，因此需要封面属性。

.page-card {
    overflow: hidden;
    text-align: left;
    margin-top: 30px;
}

.page-card a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

.page-card * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

.page-card img {
    object-fit: cover; 
    width: 100%; 
}

.page-card figcaption {
    position: absolute;
    top: calc(77%);
    height: 100%;
    background-color: black;
    /* the site uses an image here I filled it with black for the code snip */
    background-size: cover;
    border-top: 1px solid #333;
    margin-right: 15px;
    padding: 35px 25px 65px;
    color: white;
}
.page-card:hover figcaption,
.page-card.hover figcaption {
    top: 0px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

<!--Example 1 not spanning dark hover color 100% width-->
  <div class="row d-flex flex-row">
    <figure class="col-md-6 col-xl-4 page-card">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample45.jpg" width="880" height="640">
      <figcaption>
        <h1>Title</h1>
        <p>Descrition</p>
        <button type="button" class="btn btn-outline-light itm-space">Learn More</button>
      </figcaption><a href="www.mylink.com">link</a>
    </figure>
  </div>
  
  
  <!--Example 2 does cover 100% width when text wraps to a second line-->
  <div class="row d-flex flex-row">
    <figure class="col-md-6 col-xl-4 page-card">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample45.jpg" width="880" height="640">
      <figcaption>
        <h1>Title</h1>
        <p>Descrition Text that continues to wrap to a second line and fills the complete width like I want it to by default</p>
        <button type="button" class="btn btn-outline-light itm-space">Learn More</button>
      </figcaption><a href="www.mylink.com"></a>
    </figure>
  </div>
 
</div>

Answer 1

您需要给予“悬停” div 宽度 :100%:

.page-card figcaption {width:100%}

当给定元素时 position:absolute 不再是默认宽度为 100% 的“块”元素。

完成后，您可能会注意到它比下图占用更多空间。那是因为图像父级有填充并且你没有使用规则 box-sizing:border-box 如果你将它添加到你的顶部 css sheet 它应该可以解决你的问题。

* {box-sizing:border-box}

Answer 2

添加：

.page-card figcaption {width:100%}

解决了宽度问题但造成了 30px 的溢出，因为绝对定位没有考虑到父元素的内边距。

.page-card figcaption {clip-path: inset(0px 30px 0px 0px)}

上面的代码将剪辑溢出。

图像卡片悬停效果宽度问题

Image card hover effect width issue

html

css

caption

figure