Html 小型设备上的Boostrap卡问题

我有一个关于小魔鬼的问题。我使用悬停效果来滑动内容。 但在小型设备上，内容会切割图像。我真的不知道如何使用position:absolute使内容在图像之后直接开始。我只想看看名字和头衔。当鼠标悬停时，其余内容将以幻灯片形式显示

。团队卡{
边界：0！重要；
边界半径：5px！重要；
溢出：隐藏！重要；
}
.团队卡.卡片正文.卡片标题.团队卡.卡片正文.卡片文本{
文本对齐：居中；
保证金：0；
}
.团队卡.卡体{
位置：绝对位置；
宽度：100%；
身高：100%；
左：0；
顶部：255px；
背景色：#fff；
-moz转换：所有.3轻松输入输出；
-o型转换：所有.3s易于输入输出；
-webkit过渡：所有.3s易于输入输出；
过渡：全部。3轻松进出
}
.团队卡.卡体p{
线高：1.6em；
}
.团队卡：悬停。卡体{
排名：0；
}
.团队卡.卡体.卡文本{
边缘底部：15px；
}

无名氏
业务总监

董事会成员（核心团队）EM6和Syncada之前的业务开发总监

您看到这种行为是因为您对类
.team card.card body
使用了
top
属性的绝对数；我们可以做的是分配以下内容：
top:calc（100%-89px）
是
卡体的完整高度
，我们删除了89px，它是
卡标题
和
卡文本
的高度

正在处理下面的片段：


。团队卡{
边界：0！重要；
边界半径：5px！重要；
溢出：隐藏！重要；
}
.团队卡.卡片主体.卡片标题，
.团队卡.卡体.卡文本{
文本对齐：居中；
保证金：0；
}
.团队卡.卡体{
位置：绝对位置；
宽度：100%；
身高：100%；
左：0；
顶部：calc（100%-89px）；
背景色：#fff；
-moz转换：所有.3轻松输入输出；
-o型转换：所有.3s易于输入输出；
-webkit过渡：所有.3s易于输入输出；
过渡：全部。3轻松进出
}
.团队卡.卡体p{
线高：1.6em；
}
.团队卡：悬停。卡体{
排名：0；
}
.团队卡.卡体.卡文本{
边缘底部：15px；
}

无名氏
业务总监

董事会成员（核心团队）EM6和Syncada之前的业务开发总监