时间戳

首页 > 解决方案 > 带有阴影+文本覆盖和悬停时另一个覆盖的引导响应图像

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

问题描述

我想显示带有一些描述的图像，悬停时会覆盖。我有这样的事情：

<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;
    }
}

任何帮助表示赞赏。谢谢你。

标签： csstwitter-bootstrapoverlay

解决方案

您可以绝对定位您的叠加层并使用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>

推荐阅读