使描述文本最多滑动到div的100％高度

Question

我有一个位于底部的绝对定位描述的图像块。我想要它，当我将鼠标悬停在描述上时，它会在过渡中滑动到顶部并覆盖整个图像。

这是我刚才的代码。

<div class="offers-carousel-inner-default">
    <img src="http://placehold.it/550x500">
    <div class="offerDetails">
        <div class="content">
            <p>
      test
      </p>
            <a href="#" class="button col2-button">
                test
            </a>
        </div>
        <h5>
            test
        </h5>
    </div>

</div>

.offers-carousel-inner-default {
  position:relative;
  line-height:1;
  width:500px;
  height:500px;
}
.offerDetails {
    position:absolute;
    padding:19px;
    background:rgba(255,255,255,0.95);
    left:0;
    right:0;
    text-align:center;
    bottom:0;
    transition:all 0.4s linear;
    top:initial;
    font-family:"nobel-regular";
}
.offerDetails:hover {
    top:0;
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
}
.offerDetails:hover .content {
    display:block;
    order:2;
}
.offerDetails:hover .content-arrow {
    order:2;
    transform:rotate(180deg);
    margin-bottom:0;
    margin-top:20px;
}
.offerDetails h5 {
    font-size:20px;
    margin:0;
}
.offerDetails p {
    font-size:16px;
}
.offerDetails .content {
    display:none;
}
.offerDetails .content-arrow {
    margin-bottom:15px;
    text-align:center;
    width:100%;
    transition:all 0.4s linear;
}
.offerDetails .content-arrow img {
    max-width:34px;
}

很高兴做一些类似＆＃34; top：0＆＃34;并且它会在悬停时滑到顶部并向后滑动。

以下是JS Fiddle

Answer 1

一种可能的解决方案是将元素保留在其容器的底部，并为元素的高度设置动画，使其从固定的高度值变为height: 100%：

.offers-carousel-inner-default {
  position: relative;
  line-height: 1;
  width: 500px;
  height: 500px;
}

.offerDetails {
  position: absolute;
  padding: 19px;
  background: rgba(255, 255, 255, 0.95);
  left: 0;
  right: 0;
  text-align: center;
  bottom: 0;
  transition: all 0.4s;
  top: initial;
  font-family: "nobel-regular";
  height: 20px;
}

.offerDetails:hover {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  transition: all 0.4s;
}

.offerDetails:hover .content {
  display: block;
  order: 2;
}

.offerDetails:hover .content-arrow {
  order: 2;
  transform: rotate(180deg);
  margin-bottom: 0;
  margin-top: 20px;
}

.offerDetails h5 {
  font-size: 20px;
  margin: 0;
}

.offerDetails p {
  font-size: 16px;
}

.offerDetails .content {
  display: none;
}

.offerDetails .content-arrow {
  margin-bottom: 15px;
  text-align: center;
  width: 100%;
  transition: all 0.4s linear;
}

.offerDetails .content-arrow img {
  max-width: 34px;
}

<div class="offers-carousel-inner-default">
  <img src="http://placehold.it/550x500">
  <div class="offerDetails">
    <div class="content">
      <p>
        test
      </p>
      <a href="#" class="button col2-button">
                test
            </a>
    </div>
    <h5>
      test with height: 20px
    </h5>
  </div>

</div>

如果您需要使用height:auto;（因为它不能与transition-duration一起使用），这将无效。在这种情况下，您可以使用min-height：

.offers-carousel-inner-default {
  position: relative;
  line-height: 1;
  width: 500px;
  height: 500px;
}

.offerDetails {
  position: absolute;
  padding: 19px;
  background: rgba(255, 255, 255, 0.95);
  left: 0;
  right: 0;
  text-align: center;
  bottom: 0;
  transition: all 0.4s;
  top: initial;
  font-family: "nobel-regular";
  height: auto;
  min-height: 20px;
}

.offerDetails:hover {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  transition: all 0.4s;
}

.offerDetails:hover .content {
  display: block;
  order: 2;
}

.offerDetails:hover .content-arrow {
  order: 2;
  transform: rotate(180deg);
  margin-bottom: 0;
  margin-top: 20px;
}

.offerDetails h5 {
  font-size: 20px;
  margin: 0;
}

.offerDetails p {
  font-size: 16px;
}

.offerDetails .content {
  display: none;
}

.offerDetails .content-arrow {
  margin-bottom: 15px;
  text-align: center;
  width: 100%;
  transition: all 0.4s linear;
}

.offerDetails .content-arrow img {
  max-width: 34px;
}

<div class="offers-carousel-inner-default">
  <img src="http://placehold.it/550x500">
  <div class="offerDetails">
    <div class="content">
      <p>
        test
      </p>
      <a href="#" class="button col2-button">
                test
            </a>
    </div>
    <h5>
      test with height:auto
    </h5>
  </div>

</div>