Question

我希望叠加内容在悬停时来自图像的底部，但由于某种原因，它总是可见的，我是否遗漏了定位的内容？这是笔：http://codepen.io/anon/pen/PbjVgy

* {
  background-color: grey;
  color: white;
}

.about__images {
  max-width: 800px;
  margin: 0 auto;
}

.about__inner {
  margin-top: 60px;
}

.about__inner img {
  max-width: 100%;
  margin-right: 20px;
}


/**/

.about .about__inner {
  position: relative;
}

.about .about__inner .about__inner--overlay {
  position: absolute;
  top: 100%;
  left: 15px;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  width: 89%;
  height: 100%;
  transition: all 0.1s ease-in;
}

p {
  margin-top: 60px;
}

.about .about__inner:hover .about__inner--overlay {
  top: 0;
}

<section class="about">
  <h5 class="small__title">Lorem ipsum</h5>
  <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae commodi nisi aut animi, excepturi impedit dicta natus culpa. Veniam atque sapiente assumenda fugiat tempore ipsam eos quae</p>
  <div class="container">
    <div class="about__images">
      <div class="row">
        <div class="about__inner col-md-4">
          <img src="https://placeholdit.imgix.net/~text?txtsize=37&txt=390%C3%97259&w=390&h=259" alt="">
          <div class="about__inner--overlay">
            <p>overlay content</p>
          </div>
        </div>
        <div class="about__inner col-md-4">
          <img src="https://placeholdit.imgix.net/~text?txtsize=37&txt=390%C3%97259&w=390&h=259" alt="">
          <div class="about__inner--overlay">
            <i class="fa fa-user" aria-hidden="true"></i>
            <p>overlay content</p>
          </div>
        </div>
        <div class="about__inner col-md-4">
          <img src="https://placeholdit.imgix.net/~text?txtsize=37&txt=390%C3%97259&w=390&h=259" alt="">
          <div class="about__inner--overlay">
            <i class="fa fa-user" aria-hidden="true"></i>
            <p>overlay content</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

将overflow: hidden添加到.about__inner

.about__inner {
  margin-top: 60px;
  overflow: hidden;
}

http://codepen.io/anon/pen/ENXMxW

在悬停，css动画之前隐藏图像叠加

1 个答案: