Jquery 如何在悬停时向上展开div，而不是向下向外展开div

正如你所看到的，前两排猫在悬停时像正常一样向外扩展，向外扩展宽度，向下扩展-这很好

但对于我的最下面一行，我试图将这些div向上扩展，以与上面一行重叠。而不是站在那里的底部

这一切都是为了保持容器空间内的一切，作为一个理想的效果

jQuery（“li”）.mouseover（函数（）{
jQuery（this）.addClass（“overlay in”）；
});
jQuery（“li”）.mouseleave（函数（）{
jQuery（this.removeClass（“overlayin”）；
});
*{
边际：0px；
填充：0px；
框大小：边框框；
}
.网格列表{
宽度：100%；
浮动：左；
}
.网格列表btm{
宽度：100%；
浮动：左；
}
李先生{
宽度：25%；
浮动：左；
位置：相对位置；
高度：200px；
}
.网格列表btm li{
宽度：25%；
浮动：左；
位置：相对位置；
高度：200px；
}
.grid list li.深色封面{
显示：无；
位置：绝对位置；
背景：rgba（0,0,0,0.7）；
宽度：100%；
身高：100%；
左：0px；
顶部：0px；
}
.网格列表btm li.深色封面{
显示：无；
位置：绝对位置；
背景：rgba（0,0,0,0.7）；
宽度：100%；
身高：100%；
左：0px；
顶部：0px；
}
.container:hover.深色封面{
显示：块；
}
.集装箱{
位置：相对位置；
左：50%；
左边距：-475px；
/*背景:#FF4346*/
最大宽度：950px；
宽度：100%；
顶部：20px；
高度：748px；
}
.网格列表{
显示器：flex；
弯曲方向：行；
对正内容：空间均匀；
高度：190px；
}
李先生{
位置：相对位置；
身高：100%；
}
.网格列表btm{
显示器：flex；
弯曲方向：行；
对正内容：空间均匀；
高度：190px；
}
.网格列表btm li{
位置：相对位置；
身高：100%；
}
.目的地副本{
显示：无；
不透明度：0；
过渡：1s全部；
位置：绝对位置；
底部：0px；
宽度：100%；
背景：rgba（0,0,0,0.7）；
颜色：#fff；
填充：12px；
字体大小：13px；
字体系列：arial；
}
.cta浴{
显示：无；
不透明度：0；
过渡：1s全部；
位置：绝对位置；
底部：80px；
右：110px；
背景：#FFFFFF；
边框：2px实心#013A04；
边界半径：3px；
颜色：#0a493e；
填充：6px 15px 6px 15px；
/*线高：正常*/
字体大小：13px；
字体大小：粗体；
字体系列：arial；
}
.宣传片内容{
显示：无；
不透明度：0；
过渡：1s全部；
位置：绝对位置；
顶部：40px；
宽度：300px；
背景：rgba（0,0,0,0.7）；
颜色：#fff；
填充：12px；
字体大小：13px；
字体系列：arial；
}
.promo内容h3{
颜色：#fff；
字体大小：16px；
字体大小：粗体；
字体系列：arial；
}
.grid列表li:悬停。目标副本{
动画：1s轻松0s正常向前1 fadein；
显示：块；
}
.grid list li:hover.cta-bath{
动画：1.7秒轻松0秒正常向前1次fadein；
显示：块；
}
.grid列表li:hover.promo内容{
动画：2.7秒轻松0秒正常向前1次fadein；
显示：块；
}
@关键帧淡入淡出{
0%{不透明度：0；}
66%{不透明度：0；}
100%{不透明度：1；}
}
李先生{
过渡：宽度0.5s，高度0.5s；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
宽度：25%；/*更改*/
/*最小宽度：237px*/
/*边缘：1米*/
/*柔性包装：包装*/
列表样式：无；
}
.网格列表btm li{
过渡：高度0.5s；
-moz过渡：高度0.5s；
-webkit过渡：高度0.5s；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
宽度：237.5px；
高度：190px；
/*最小宽度：237px*/
/*边缘：1米*/
/*柔性包装：包装*/
列表样式：无；
}
.grid list li:悬停{
宽度：75%；
身高：200%；
z指数：10；
}
.网格列表btm li:悬停{
高度：380px；
z指数：10；
}
.目的地名称{
位置：绝对位置；
底部：80px；
右：0px；
背景色：#054940；
颜色：#fff；
字体大小：16px；
字体大小：粗体；
填充：6px；
宽度：100px；
文本对齐：居中；
}
/*背景图像*/
.巴斯{
背景图片：url(http://placekitten.com/600/350);  
}
.巴斯：悬停{
背景图片：url(http://placekitten.com/600/350);
}
布里斯托尔先生{
背景图片：url(http://placekitten.com/600/355);
}
布里斯托尔：悬停{
背景图片：url(http://placekitten.com/600/355);
}
卡迪夫先生{
背景图片：url(http://placekitten.com/600/356);
}
加的夫：悬停{
背景图片：url(http://placekitten.com/600/356);
}
康沃尔先生{
背景图片：url(http://placekitten.com/600/357);
}
康沃尔：悬停{
背景图片：url(http://placekitten.com/600/357);
}
多塞特先生{
背景图片：url(http://placekitten.com/600/359);
}
多塞特：悬停{
背景图片：url(http://placekitten.com/600/359);
}
科茨沃尔德先生{
背景图片：url(http://placekitten.com/600/365);
}
科茨沃尔德：悬停{
背景图片：url(http://placekitten.com/600/365);
}
埃克塞特先生{
背景图片：url(http://placekitten.com/600/366);
}
埃克塞特：悬停{
背景图片：url(http://placekitten.com/600/366);
}
.伦敦{
背景图片：url(http://placekitten.com/600/367);
}
伦敦：悬停{
背景图片：url(http://placekitten.com/600/367);
}
牛津大学{
背景图片：url(http://placekitten.com/600/368);
}
牛津：悬停{
背景图片：url(http://placekitten.com/600/368);
}
普利茅斯先生{
背景图片：url(http://placekitten.com/600/371);
}
普利茅斯：悬停{
背景图片：url(http://placekitten.com/600/371);
}
西利先生{
背景图片：url(http://placekitten.com/600/374);
}
西利：悬停{
背景图片：url(http://placekitten.com/600/374);
}
科茨沃尔德先生2{
背景图片：url(http://placekitten.com/600/349);
}
.Cotswolds2：悬停{
背景图片：url(http://placekitten.com/600/349);
}
.overlay in.dark cover{显示：无！重要；}



浴室
宣传片内容

在康塞特图的伊普苏姆·多洛·希特·阿梅特（ipsum dolor sit amet）