html - 位置 :absolute header and background 上的转换

Question

我正在尝试将悬停状态应用于某些投资组合导航。它是图像顶部水平和垂直居中的标题。居中工作按照我的需要进行(它之所以如此复杂是有原因的，或者相信我，我会以其他方式进行)。

但是悬停状态给我带来了问题。我正在尝试做这样的事情:http://jsfiddle.net/kmjRu/33/ .这是 h2 及其在图像悬停时的背景的过渡。我几乎可以通过摆弄不透明度或 h2 的 z-index 来让它工作，但尤其是背景颜色的变化不起作用(因为没有元素完全覆盖图像，其中我可以改变背景)。有谁知道如何让悬停状态正常工作？

这是我拥有的代码，我正试图在其上实现悬停效果:

(也张贴在这里:http://jsfiddle.net/kmjRu/34/)

HTML

<article>
    <div class="img-crop">
        <h2>Title</h2>
        <a href="#"><img src="http://bit.ly/gUKbAE" /></a>
    </div>
</article>

CSS

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

article {
    overflow: hidden;
}

.img-crop {
    display: inline-block;
    position: relative;
    overflow: hidden;
    max-width: 100%;
}

h2 {
    margin: 0;
    padding: 0;
    z-index: 1;
    line-height: 0;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
}

Answer 1

h2 {
    margin: 0;
    padding: 0;
    z-index: 1;
    line-height: 0;
    position: absolute;
    display: block;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0;

    transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}

h2:hover {
    opacity: 1;
}

这可能是它!