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

Question

当我将鼠标悬停在图像顶部时，我希望文本隐藏在它应该可见的位置。

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

但我不会在图像悬停时在图像顶部显示文本，如下所示

所以基本上，此处显示的文本和上图中此处显示的 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;
}

请帮忙

Answer 1

希望对您有所帮助。 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>