悬停高度过渡不起作用

Question

我正在研究一些与过渡相关的盒子，但遇到了这个问题。这是一些带有灰度的图像。当您将鼠标悬停在它们上时，它们会恢复正常状态。实际问题是当您将鼠标悬停在图像上时，会显示一个带有边框和特定高度的类。我给班级指定了特定的高度，当您将鼠标悬停在图像上时，班级的高度应该增加并停在一个特定的点。但是，高度过渡不起作用。

.section-inner {
    width: 440px;
    margin: 0 auto;
}
.grid-img:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
.grid-img {
    background-color: #ffffff;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    position: relative;
    display: inline-block;
    margin-right: 50px;
    transition: all 0.8s ease-in-out;
}
.profile img {
    width: 150px;
    height: auto;
}
.img-caption {
    top: 10px;
    left: 5%;
    z-index: -1;
    height: 20%;
    position: absolute;
    display: none;
    width: 90%;
    height: 20%;
    border: 4px solid gray;
}
.grid-img:hover .img-caption {
    z-index: 99;
    border: 4px solid orange;
    display: block;
    height: 120%;
}
.dummy {
    position: absolute;
    bottom: 0;
}
.dummy h4 {
    font-size: 16px;
    padding-bottom: 10px;
}

<div class="section-inner"> 
 <div class="atg-col-2 grid-img">
    <div class="profile">
      <img src="https://preview.ibb.co/dJHACQ/Road.jpg">
    </div><!-- .profile-->
    <div class="img-caption">
      <div class="dummy">
        <h4>SARA CAVIL</h4>
      </div>
    </div><!-- img-caption-->
  </div><!-- grid-img-->

  <div class="atg-col-2 grid-img">
    <div class="profile">
      <img src="https://preview.ibb.co/jFhtXQ/adam_birkett_187521.jpg">
    </div><!-- .profile-->
    <div class="img-caption">
      <div class="dummy">
        <h4>SARA CAVIL</h4>
      </div>
    </div><!-- img-caption-->
  </div><!-- grid-img-->
</div>  

感谢任何形式的帮助。 提前谢谢你。

Answer 1

你想要这样的东西吗？

问题是 display:none，它导致了转换问题。我添加了一个额外的过渡来显示变化。此外，由于您使用的是绝对定位，因此您无需提及width，您只需定义left 和right 位置，也可以不使用display:none 属性，而是使用visibility:hidden 和@987654326 @ 正如我在下面的 CSS 类中所展示的那样。

CSS：

.img-caption {
    top: 0px;
    left: 0px;
    right:0px;
    visibility:hidden;
    z-index: -1;
    height: 20%;
    position: absolute;
    transition:all 1s ease;
    height: 20%;
    border: 4px solid gray;
}
.grid-img:hover .img-caption {
    z-index: 99;
    visibility:visible;
    border: 4px solid orange;
    display: block;
    height: 120%;
}

片段：

.section-inner {
    width: 440px;
    margin: 0 auto;
}
.grid-img:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
.grid-img {
    background-color: #ffffff;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    position: relative;
    display: inline-block;
    margin-right: 50px;
    transition: all 0.8s ease-in-out;
}
.profile img {
    width: 150px;
    height: auto;
}
.img-caption {
    top: 0px;
    left: 0px;
    right:0px;
    visibility:hidden;
    z-index: -1;
    height: 20%;
    position: absolute;
    transition:all 1s ease;
    height: 20%;
    border: 4px solid gray;
}
.grid-img:hover .img-caption {
    z-index: 99;
    visibility:visible;
    border: 4px solid orange;
    display: block;
    height: 120%;
}
.dummy {
    position: absolute;
    bottom: 0;
}
.dummy h4 {
    font-size: 16px;
    padding-bottom: 10px;
}

<div class="section-inner"> 
 <div class="atg-col-2 grid-img">
    <div class="profile">
      <img src="https://preview.ibb.co/dJHACQ/Road.jpg">
    </div><!-- .profile-->
    <div class="img-caption">
      <div class="dummy">
        <h4>SARA CAVIL</h4>
      </div>
    </div><!-- img-caption-->
  </div><!-- grid-img-->

  <div class="atg-col-2 grid-img">
    <div class="profile">
      <img src="https://preview.ibb.co/jFhtXQ/adam_birkett_187521.jpg">
    </div><!-- .profile-->
    <div class="img-caption">
      <div class="dummy">
        <h4>SARA CAVIL</h4>
      </div>
    </div><!-- img-caption-->
  </div><!-- grid-img-->
</div>

Answer 2

你可以使用

.img-caption {
   top: 10px;
   left: 5%;
   z-index: -1;
   height: 0%;
   position: absolute;
   width: 90%;
   border: 4px solid gray;
   transition: all 0.8s ease-in-out;
  }