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

这可能是它！

Answer 2

基本上，您需要确保以下事项。

你的h2应该与后面的容器完全相同，只有它才会执行完全叠加。
将opacity的默认h2设置为0.并将其更改/转换为某个中间值，例如hover上的0.6。
现在，你需要让h2的background-color为黑色，或者不同于父容器，只有它会出现。
然后为h2元素提供适当的填充，使文本显示在中间。

像这样设置h2：

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

    opacity:0;
}

并将h2:hover设置为：

h2:hover
{
    padding-top:20%;
    color:white;
    background-color:Black;
    opacity:0.6;
    -webkit-transition: opacity 0.25s, background-color 0.25s;
    -o-transition: opacity 0.25s, background-color 0.25s;
    -moz-transition: opacity 0.25s, background-color 0.25s;
    -ms-transition: opacity 0.25s, background-color 0.25s;
    -kthtml-transition: opacity 0.25s, background-color 0.25s;
    transition: opacity 0.25s, background-color 0.25s;
}

请参阅此fiddle

Answer 3

所以，我这样解决了这个问题：

HTML

<article>
    <div class="item">
        <a href="#" class="title"><h2>Title</h2></a>
        <img src="http://placehold.it/350x150" />
    </div>
</article>

CSS

article {
    overflow: hidden;
}

h2 {
    font-weight: normal;
    z-index: 2;
    line-height: 0;
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    left: 0;
    margin: 0;
    padding: 0;
    color: rgba(255,255,255,0);
    -webkit-transition: color 0.2s linear;  
    -moz-transition: color 0.2s linear;  
    -o-transition: color 0.2s linear;  
    transition: color 0.2s linear; 
}

.title {
    display: inline-block;
    position: absolute;
    overflow: hidden;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0);
    text-decoration: none;
    -webkit-transition: background-color 0.2s linear;  
    -moz-transition: background-color 0.2s linear;  
    -o-transition: background-color 0.2s linear;  
    transition: background-color 0.2s linear; 
}

.title:hover {
    text-decoration: none;
}

.item {
    display: inline-block;
    position: relative;
    max-width: 100%;
}

.item:hover .title {
    background: rgba(0,0,0,0.6);
}

.item:hover h2 {
    color: rgba(255,255,255,1);
}

img {
    border: 0;
    vertical-align: top;
    max-width: 100%;
}

见fiddle。这样它就是动态的（图像是流动的，没有固定的高度或宽度），标题自动垂直和水平居中。

位置转换：绝对标题和背景

3 个答案: