使用css在悬停时转换效果跨度

Question

我希望通过CSS过渡在悬停上创建一个推出效果，但它不起作用。有人知道解决方案吗？我已经尝试了不同的东西，但没有任何作用。

这是HTML（bootstrap3）：

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 tile" id="past">
    <a href="#" class="item thumbnail">Title
              <span class="mouseover margin1">Blablabla</span>
        </a>
</div>

这是CSS：

.mouseover{
    display:none;
    height: 0em;
    overflow: hidden;
    transition-property: height;
    transition: all 1s ease-in-out;
}


.thumbnail:hover .mouseover{
    height: 5em;
    display:block;
    }