图片卡悬停效果宽度问题答案

【问题标题】：Image card hover effect width issue图片卡悬停效果宽度问题
【发布时间】：2021-09-24 19:57:32
【问题描述】：

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

即使没有内容，让黑盒子填充父元素“.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>

【问题讨论】：

标签： html css figure caption

【解决方案1】：

你需要给“悬停”的 div 宽度：100%：

.page-card figcaption {width:100%}

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

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

* {box-sizing:border-box}

【讨论】：

你好，谢谢。添加 100% 的宽度确实会强制 figcaption 超出父级 15px。您预计这会在您的回复中发生。您提供的代码没有解决问题。我必须隐藏溢出并剪辑路径。你能帮我摆脱多余的 15px 溢出吗？
只用 width:calc(100% - 15px)

【解决方案2】：

添加：

.page-card figcaption {width:100%}

解决了宽度问题，但造成了 30px 的溢出，因为父元素的填充没有被绝对定位所尊重。

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

上面的代码将剪辑溢出。

【讨论】：