Html 悬停高度过渡不起作用

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

。内部部分{
宽度：440px；
保证金：0自动；
}
.grid img：悬停{
-webkit过滤器：灰度（0）；
过滤器：灰度（0）；
}
.电网img{
背景色：#ffffff；
-webkit过滤器：灰度（100%）；
滤镜：灰度（100%）；
位置：相对位置；
显示：内联块；
右边距：50px；
过渡：所有0.8秒都易于输入输出；
}
.个人资料{
宽度：150px；
高度：自动；
}
.img标题{
顶部：10px；
左：5%；
z指数：-1；
身高：20%；
位置：绝对位置；
显示：无；
宽度：90%；
身高：20%；
边框：4倍纯色灰色；
}
.grid img:hover.img标题{
z指数：99；
边框：4倍纯色橙色；
显示：块；
身高：120%；
}
.笨蛋{
位置：绝对位置；
底部：0；
}
.虚拟h4{
字体大小：16px；
垫底：10px；
}

莎拉·卡维尔
莎拉·卡维尔

你想要这样的东西吗

问题在于显示：无，这导致了转换问题。我添加了一个额外的过渡来显示更改。此外，由于您使用的是绝对定位，因此无需提及

宽度

，您只需定义

左侧

和

右侧

位置，也无需使用

显示：无

属性，在我下面的CSS类中演示的

visibility:hidden

和

visibility:visible

如何

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

片段：

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

。内部部分{
宽度：440px；
保证金：0自动；
}
.grid img：悬停{
-webkit过滤器：灰度（0）；
过滤器：灰度（0）；
}
.电网img{
背景色：#ffffff；
-webkit过滤器：灰度（100%）；
滤镜：灰度（100%）；
位置：相对位置；
显示：内联块；
右边距：50px；
过渡：所有0.8秒都易于输入输出；
}
.个人资料{
宽度：150px；
高度：自动；
}
.img标题{
顶部：0px；
左：0px；
右：0px；
可见性：隐藏；
z指数：-1；
身高：20%；
位置：绝对位置；
过渡：所有的1容易；
身高：20%；
边框：4倍纯色灰色；
}
.grid img:hover.img标题{
z指数：99；
能见度：可见；
边框：4倍纯色橙色；
显示：块；
身高：120%；
}
.笨蛋{
位置：绝对位置；
底部：0；
}
.虚拟h4{
字体大小：16px；
垫底：10px；
}

莎拉·卡维尔
莎拉·卡维尔

您可以使用

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

---

打开此链接，它可能会帮助您[这正是我需要的，再次感谢。