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()将其移开。悬停时将其移回。这是您想要实现的效果吗？

这是一个可与https://codepen.io/Sixl/pen/bOdwaZ?editors=1100一起玩的CodePen

.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

这里有一些关于您描述的位置的信息，但是您最好描述一下您想要的内容：

引导：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;
}

使用阴影和文本覆盖物以及悬停时的另一个覆盖物来引导响应图像

2 个答案: