css - 带有阴影+文本覆盖和悬停时另一个覆盖的 Bootstrap 响应图像

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>