Question

我在尝试在圆滑的转盘上叠加效果时遇到问题。想法是将文本放置在块的中心，但是当宽度为100％时，它将填充整个轮播，而不是父块的整个长度。这是现在的样子：

HTML：

<div class="slider-wr" >
  <div class="slider">
    <div class="container">
      <div class="item" >
        <div class="image" style="background-image: url(https://www.ienglishstatus.com/wp-content/uploads/2018/04/Sad-Profile-Pic-for-Whatsapp.png)">
        </div>
        <div class="overlay">
          <span>
            TEXT
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

.slider-wr {
  width: 70%;
  height: auto;
  margin: 30px auto 0px;
}

.image {
  background-position: center;
  background-size: cover;
  overflow: hidden;
  height: 150px;
}

.container {
  align-content: center;
  text-align: center;
}

.item .overlay{
  position: absolute;
  opacity: 0;
  bottom: 0;
  color: #F2F2F2;
  transition: .5s ease;
  background-color: rgba(0, 0, 5, 0.5);
  height: 100%;
  width: 150px;
}

.overlay span{
  color: white;
  font-size: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.item:hover .overlay{
  opacity: 1;
}

JS：

$('.slider').slick({
  slidesToShow: 5,
  slidesToScroll: 1,
  infinite: true,
  responsive: [
    {
      breakpoint: 550,
      settings: {
        centerMode: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        dots: true,
      }
    },
  ]
});

这里是一个链接： https://codepen.io/anon/pen/gKKKvP

Answer 1

尝试这个https://codepen.io/anon/pen/vrraex

我更改了此内容

将position:relative添加到.item div
在width:100% div中使用width:150px代替.overlay

.item .overlay {
  ...
  // width: 150px;
  width: 100%;
}

.item {
    position: relative;
}

调整覆盖宽度为光滑轮播

1 个答案: