Html CSS img悬停扩展黑条

我目前正在尝试为网站创建一个特殊的悬停

以下是我想做的：

4个块，所有块都带有一个黑色条，主文本不透明度为70%

然后，当我悬停在一个块上时，黑色条会填满底部的所有空间，并显示2或4个按钮

也许是这样的：

<div class="image-block">
    <div class="image1">
        <span class="black-bar">SOME TEXT</span>
        <button class="special-button">Button</button>
        <button class="special-button">Button</button>
    </div>
    <div class="image2">
        <span class="black-bar">SOME TEXT</span>
        <button class="special-button">Button</button>
        <button class="special-button">Button</button>
    </div>
    <div class="image3">
        <span class="black-bar">SOME TEXT</span>
        <button class="special-button">Button</button>
        <button class="special-button">Button</button>
        <button class="special-button">Button</button>
        <button class="special-button">Button</button>
    </div>
    <div class="image4">
        <span class="black-bar">SOME TEXT</span>
        <button class="special-button">Button</button>
        <button class="special-button">Button</button>
    </div>
</div>

一些文本
按钮
按钮
一些文本
按钮
按钮
一些文本
按钮
按钮
按钮
按钮
一些文本
按钮
按钮

但是对于CSS，我真的不知道如何做到这一点。什么是最简单和最好的方式来做到这一点的东西完全响应

谢谢

查看下面的代码（我必须使用jQuery）或

$（'.text'）.mouseenter（函数（）{
$（'.hover'）。设置动画（{'height'：'200px'}，'slow'）；
});
$（'.image'）.mouseleave（函数（）{
$（'.hover'）。设置动画（{'height'：'100px'}，'slow'）；
});
.image{
位置：相对位置；
背景图片：url(http://www.w3schools.com/css/trolltunga.jpg);
高度：300px；
宽度：600px；
}
.盘旋{
显示：块；
高度：100px；
宽度：600px；
背景色：rgba（0,0,0,0.7）；
溢出：隐藏；
边缘顶部：100px；
位置：绝对位置；
}
按钮，.text{
显示：块；
宽度：130像素；高度：40像素；
保证金：0自动；
}
.文本{
颜色：白色；
字体大小：40px；
文本对齐：居中；
填充顶部：30px；
宽度：200px；
边缘底部：30px；
显示：块；
}

此处文本
按钮在这里
当鼠标离开图像时，黑框会缩小
这里有一个纯css

选项。如果我错过了什么，就告诉我。我不得不稍微调整一下你的加价

。图像块{
显示器：flex；
弯曲方向：行；
}
上校{
显示器：flex；
弯曲方向：立柱；
}
.image1、.image2、.image3、.image4{
背景：url(http://lorempixel.com/output/nature-q-c-640-480-1.jpg)无重复中心；
背景尺寸：封面；
宽度：200px；
利润率：0 20px 20px 0；
位置：相对位置；
溢出：隐藏；
}
.image1、.image4{
高度：100px；
}
.image2、.image3{
高度：200px；
}
.黑条{
背景：rgba（0,0,0,0.4）；
文本对齐：居中；
颜色：#fff；
宽度：100%；
最高：50%；
位置：绝对位置；
利润上限：-18px；
填充：10px0；
字体系列：Helvetica、Arial、无衬线字体；
过渡：所有0.5s缓解；
底部：钙（50%-15px）；
溢出：隐藏；
}
.黑条按钮{
利润率：10px；
显示：无；
边界：无；
背景：#fff；
}
.黑条{
保证金：0；
字号：200；
字体大小：12px；
}
.image1:悬停.黑条，.image2:悬停.黑条，.image3:悬停.黑条，.image4:悬停.黑条{
底部：0；
过渡：所有0.5s缓解；
}
.image1:悬停.黑条按钮，.image2:悬停.黑条按钮，.image3:悬停.黑条按钮，.image4:悬停.黑条按钮{
显示：内联块；
}

一些文本

按钮
按钮
一些文本

按钮
按钮
一些文本

按钮
按钮
按钮
按钮
一些文本

按钮
按钮

我是说，是的。比如，如果你调整屏幕的大小，它看起来会是一样的，直到它太小而无法正确显示按钮，所以每个块都会位于另一块的顶部尝试为半透明的黑框提供尺寸-宽度+高度。首先，使用按钮将高度设置为仅显示一行，悬停时，增加高度以同时显示另一行。另外，将属性

overflow:hidden

添加到黑框中。使用媒体查询以不同的屏幕大小和断点为目标。如果您希望在悬停黑条时显示按钮->将按钮放入

。黑条

div，请将它们设置为

显示：无

和样式

。黑条：悬停。带有
显示：内联块的特殊按钮
。如果你想要活生生的例子，请创建代码笔代码段。我将在明天尝试使用代码笔并更新代码，谢谢！这是一个非常好的开始，谢谢！但是第二张更高的照片呢？你只有一条路可以到达页边空白处？太好了！但是有可能有一个像米克尔一样的纯css动画吗？非常感谢你的努力！我对它做了一些修改，以适应我的主题，它是完美的。祝你今天愉快：）