Блог

Главная - Вопросы по программированию - Проблема с шириной эффекта наведения на карту изображения

Проблема с шириной эффекта наведения на карту изображения

#html #css #figure #caption

Вопрос:

В приведенном ниже коде у меня есть карточка с изображением с эффектом наведения. При наведении курсора я бы хотел, чтобы черный ящик по умолчанию закрывал все изображение. В приведенном ниже коде черный ящик не закрывает полное изображение, если только текст заголовка или описания не обертывает вторую строку.

Каков наилучший способ заставить черный ящик заполнить всю ширину родительского элемента «.страница-карточка» даже без содержимого внутри него? Я пытался:

ширина: 100%, направление сгиба, очистка, хаки для таблиц и многие другие советы, которые я нашел без всякой удачи. Любая помощь будет признательна.

Краткое примечание: для подписи на странице .page-card я использую изображение на сайте, поэтому необходимы свойства обложки.

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

Ответ №1:

Вам нужно дать, чтобы дать «зависнуть» div шириной :100%:

 .page-card figcaption {width:100%}

Когда задан элемент position:absolute , он больше не является элементом «блока» с шириной по умолчанию 100%.

Как только вы это сделаете, вы можете заметить, что это занимает больше места, чем на изображении ниже. Это связано с тем, что у родителя изображения есть заполнение, и вы не используете правило box-sizing:border-box , если вы добавите его сверху, css sheet это должно решить вашу проблему.

 * {box-sizing:border-box}

Комментарии:

1. здравствуйте и спасибо вам. добавление ширины 100% привело к тому, что изображение на рисунке превысило родительское на 15 пикселей. Вы ожидали, что это произойдет в вашем ответе. Код, который вы дали, не устранил проблему. Я должен скрыть переполнение и также обрезать путь. Можете ли вы помочь мне избавиться от лишних 15 пикселей переполнения?

2. Просто используйте ширину:calc(100% — 15 пикселей)

Ответ №2:

Добавление:

 .page-card figcaption {width:100%}

устранена проблема с шириной, но создано 30 пикселей переполнения, поскольку заполнение родительских элементов не соблюдалось при абсолютном позиционировании.

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

Приведенный выше код устранит переполнение.

Метки: