загрузите реагирующие изображения с наложением тень + текст и другим наложением при наведении

Question

Я хотел бы отобразить изображения с некоторыми описаниями, которые будут накладываться при наведении курсора.У меня есть что-то вроде этого:

<div class="container-fluid">
   <div class="row">
      <div class="product-item col-md-4 col-sm-6 col-xs-12 p-3">
         <div class="product-container">
            <a href="#"><img src="images/img.png" class="product-img" alt=""></a>
            <p class="product-descr">Some description</p>
         </div>
      </div>
   </div>
</div>

Теперь мне нужно добавить несколько классов (product-item, product-container, product-img, product-desc), чтобы все заработало.Но я пробовал много комбинаций и все еще имею описание под изображением (даже если оверлей описания идет в правильном месте).И текст заставляет контейнер выходить из нижней части изображения, и фон этого контейнера виден.

В настоящее время мои стили выглядят так:

.product-item {
    position: relative;

}

.product-container {
    background:red;
    position: relative;
    width:100%;
}

.product-img {
    position: relative;
    width: 100%;
    @include hover-focus {
        opacity: .5;
    }
}

.product-overlay {
    position: relative;
    &:after {
        position: absolute;
        content: "";
        background: #FFF;
        top: -25px;
        left: 0;
        width: 100%;
        height: 25px;
        opacity: .7;
        z-index:10;
    }
}

Любая помощь приветствуется.Спасибо.

Answer 1

Вы можете расположить оверлей полностью и убрать его с пути с помощью transform: translateY().При наведении вы вернете его обратно. Это тот эффект, которого вы хотели достичь?

Вот CodePen, с которым можно играть: https://codepen.io/Sixl/pen/bOdwaZ?editors=1100

.product-item {
  position: relative;
}

.product-container {
  background: #000;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.product-container .product-description {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  text-align: right;
  padding: 0.2em 0.4em 0.2em;
  -webkit-transform: translateY(101%);
  transform: translateY(101%);
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
}

.product-container:hover .product-description {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.product-img {
  display: block;
  max-width: 100%;
  height: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row">
    <div class="product-item col-md-4 col-sm-6 col-xs-12 p-1">
      <a href="#">
        <figure class="product-container">
          <img class="product-img" alt="" src="https://picsum.photos/800/450?image=20">
          <figcaption class="product-description">Some description</figcaption>
        </figure>
      </a>
    </div>
    <div class="product-item col-md-4 col-sm-6 col-xs-12 p-2">
      <a href="#">
        <figure class="product-container">
          <img class="product-img" alt="" src="https://picsum.photos/800/450?image=21">
          <figcaption class="product-description">Some description</figcaption>
        </figure>
      </a>
    </div>
    <div class="product-item col-md-4 col-sm-6 col-xs-12 p-3">
      <a href="#">
        <figure class="product-container">
          <img class="product-img" alt="" src="https://picsum.photos/800/450?image=22">
          <figcaption class="product-description">Some description</figcaption>
        </figure>
      </a>
    </div>
    <div class="product-item col-md-4 col-sm-6 col-xs-12 p-4">
      <a href="#">
        <figure class="product-container">
          <img class="product-img" alt="" src="https://picsum.photos/800/450?image=23">
          <figcaption class="product-description">Some description</figcaption>
        </figure>
      </a>
    </div>
    <div class="product-item col-md-4 col-sm-6 col-xs-12 p-5">
      <a href="#">
        <figure class="product-container">
          <img class="product-img" alt="" src="https://picsum.photos/800/450?image=24">
          <figcaption class="product-description">Some description</figcaption>
        </figure>
      </a>
    </div>
    <div class="product-item col-md-4 col-sm-6 col-xs-12 p-6">
      <a href="#">
        <figure class="product-container">
          <img class="product-img" alt="" src="https://picsum.photos/800/450?image=25">
          <figcaption class="product-description">Some description</figcaption>
        </figure>
      </a>
    </div>
  </div>
</div>

Answer 2

Здесь кое-что касается позиции вашего описания, но вы должны лучше описать, что вы хотите:

Bootply : https://www.bootply.com/blEmsHAYJ1

CSS :

.product-item {
    position: relative;

}

.product-container {
    background:red;
    position: relative;
    width:100%;

}

.product-overlay {
    position: relative;

}

.product-overlay:after {
        position: absolute;
        content: "";
        background: #FFF;
        top: -25px;
        left: 0;
        width: 100%;
        height: 25px;
        opacity: .7;
        z-index:10;

}

.product-img {
    position: relative;
    width: 100%;

}
.product-img:hover {
        opacity: .5;
}

.product-descr{
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    margin: 0;
    text-align: center;
}