如何使用HTML5/CSS3实现以下目标？

我想文本隐藏在图像的顶部，当我悬停它应该是可见的

通常情况下，图像看起来像这样，上面没有文本悬停

但当它像下面这样悬停时，我不会在图片上方显示文本

所以基本上，上图中显示的文本和div应该在开始时隐藏，当鼠标悬停完成时，显示这些元素

类似于

我试过的代码不起作用

html:

请帮忙，让我来帮你。：）

.scaleout{
转换：比例（1.25）；
-ms变换：比例（1.25）；
-webkit转换：比例（1.25）；
}
希德姆先生{
字体大小：14px；
颜色：黑色；
顶部：继承；
z指数：-1；
文本对齐：居中；
垂直对齐：中间对齐；
位置：相对位置；
}
#缩略图{
宽度：220px；
高度：150像素；
显示：块；
转换：比例（1.25）；
-ms变换：比例（1.25）；
-webkit转换：比例（1.25）；
过渡时间：均为500ms；
}
#缩略图：悬停{
变换：比例（1）；
-ms变换：尺度（1）；
-webkit转换：规模（1）；
过渡时间：均为500ms；
}

图文
另一个图像文本？没问题：）

图{display:flex；flex direction:column；}
div{顺序：-1；可见性：隐藏；}
img{align self:flex start；}
img:hover+div{可见性：可见；}

只有当img悬停时，您才能看到我：）

我希望这能对您有所帮助

.hideme
{
显示：块；
位置：绝对位置；
顶部：20px；
右：0；
左：0；
保证金：0自动；
z指数：10；
过渡：0.3s；
}
.imgcontainer:hover.hideme
{
排名：0；
}
.imgcontainer
{
宽度：201px；
高度：286px；
位置：相对位置；
}
img
{
位置：绝对位置；
底部：0；
过渡：0.3s；
左：0；
右：0；
保证金：0自动；
高度：286px；
z指数：15；
}
.img容器：悬停img
{
身高：80%；
底部：10%；
}

图文

.hideme{
字体大小：14px；
颜色：黑色；
顶部：继承；
z指数：-1；
文本对齐：居中；
垂直对齐：中间对齐；
位置：相对位置；
}
#缩略图{
宽度：220px；
高度：150像素；
显示：块；
转换：比例（1.2）；
-ms变换：比例（1.2）；
-webkit转换：规模（1.2）；
过渡：均为100毫秒；
}
#缩略图：悬停{
变换：比例（1）；
-ms变换：尺度（1）；
-webkit转换：规模（1）；
过渡：均为100毫秒；
}

图文

试试这个CSS。它会帮助你的。 有关更多CSS（悬停和样式）的信息，请访问网站 “”

问候：Sheheryar （巴基斯坦）

图{
宽度：600px；
高度：400px；
保证金：自动；
填充：0；
背景：#fff；
溢出：隐藏；
}
.01图img{
-webkit变换：比例（0.8）；
变换：比例（0.9）；
-webkit转换：.3s轻松输入输出；
转换：.3s易进易出；
}
.hover01图：悬停img{
-webkit转换：规模（1）；
变换：比例（1）；
}

无标题文件

当像第二张图片一样悬停时，您真的想要扭曲图像吗？当然，你想把这篇课文翻过来吗？

<div class="imgcontainer"> 
    <span class="hideme">Image text</span>
    <img class="img-responsive" id="thumbnail" src="source of image">
</div>

.scaleout {
    transform: scale(1, 0.80);
    -ms-transform: scale(1, 0.80);
    -webkit-transform: scale(1, 0.80);

}

.hideme {
    color: black;
    top: inherit;
    z-index: -1;
    text-align: center;
    vertical-align: middle;
    position: relative;
}