Image card hover effect width issue-CodePudding

In the code below, I have an image card with a hover effect. On hover, I'd like the black box to cover the complete image by default. In the code below, the black box does not cover the complete image unless the title or description text wraps two a second line.

What is the best way to get the black box to fill the complete width of the parent element ".page-card" even without content inside of it? I have tried:

width: 100%, flex direction, clears, table hacks, and many other tips I found without any luck. Any help would be appreciated.

Quick note: for .page-card figcaption I'm using an image on the site so the cover properties are needed.

.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/[email protected]/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>

CodePudding user response：

You need to give to give to the "hover" div width :100%:

.page-card figcaption {width:100%}

When an element is given position:absolute is no longer a "block" element with default widh 100%.

Once you do it, you may notice it takes more room than the image below. That is becouse the image parent has padding and you are not using the rule box-sizing:border-box If you add this to the top of you css sheet it should solve your problem.

* {box-sizing:border-box}

CodePudding user response：

Adding:

.page-card figcaption {width:100%}

resolved the width issue but created 30px of overflow because the parent elements padding was not being respected with absolute positioning.

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

The code above will clip the overflow.