html - 如何使用HTML5/CSS3实现关注？

我希望文本隐藏在图像顶部，当我悬停它应该是可见的。
通常情况下，图像看起来是这样的，而不是将文本悬停在上面。

但是我不会在图像像下面这样悬停时在图像顶部显示文本

所以基本上这里显示的文本和上面图片中这里显示的div最初应该隐藏，当鼠标悬停完成时显示这些元素。
类似于this
我试过的代码不起作用
html格式：

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

css:

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

请帮忙

最佳答案

我希望这能帮助你。Jsfiddle

.hideme
{
    display: block;
    position: absolute;
    top: 20px;
    right: 0;
    left: 0;
    margin: 0 auto;
    z-index: 10;
    transition:0.3s;
}

.imgcontainer:hover .hideme
{
    top:0;
}

.imgcontainer
{
    width: 201px;
    height: 286px;
    position: relative;
}

img
{
    position: absolute;
    bottom: 0;
    transition: 0.3s;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 286px;
    z-index: 15;
}


.imgcontainer:hover img
{
    height: 80%;
    bottom: 10%;
}

<div class="imgcontainer">
    <span class="hideme">Image text</span>
    <img width="100%" class="img-responsive" id="thumbnail" src="http://s7.postimg.org/x3fs9p8cr/image.png">
</div>