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

【问题标题】：Transition on position:absolute header and background位置转换：绝对标题和背景
【发布时间】：2013-04-01 01:05:42
【问题描述】：

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

但是悬停状态给我带来了问题。我正在尝试做这样的事情：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;
}

【问题讨论】：

我并不完全清楚问题到底是什么，具体的期望结果是什么？
我想应用上面小提琴中概述的悬停状态。在这样做的过程中，我想在图像顶部保留垂直和水平居中的标题（不指定尺寸，就像现在一样：动态居中）。另外，我想保留图像溢出的隐藏，因为它超过了屏幕宽度，如果它小于图像，则保持标题在屏幕宽度上居中的方式。有很多要解释的，但我希望这能澄清它。

标签： html css image header hover

【解决方案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;
}

可能就是这样！

【讨论】：

差不多了。如果将 hoverstate 更改为：article:hover h2 {opacity:1;}，即使您没有直接悬停 h2，它也会触发。但我也希望图像变暗，否则标题可能不可读。如果我尝试通过为 h2 设置背景来解决这个问题，它不会出现。有什么想法吗？
基本上我需要做的是在img前面和h2后面获取一个元素，所以我可以使用background-color:rgba(0,0,0,0.5);将它变暗，但我不知道如何。
好的，我就在上面，几个月前，我自己的投资组合需要完全相同的东西，我从未结束过，顺便说一句......
是的，我的故事也有点没完没了。
我认为这 (jsfiddle.net/kmjRu/37) 有点用，但你知道为什么它在悬停时会延伸到下方吗？（即，悬停与图像的大小不完全相同？）

【解决方案2】：

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

你的 h2 应该完全等于后面的容器，只有这样它才会执行完全覆盖。
将h2 的默认opacity 设置为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

【讨论】：

问题是，我不能为这个项目使用固定高度。它要求我将高度基于 img 的尺寸（它们是动态的）。而且我想这仅适用于固定高度的图像。对动态解决方案有任何想法吗？
那又怎样？你的 h2 应该覆盖整个父 div 容器吗？如果它覆盖父 div，它将覆盖图像，因为图像在 div 内。并且您已经为 h2 提供了 100% 的高度。所以我想应该没有问题
这就是问题所在，h2 并没有覆盖整个父级，只覆盖了底部的 50%。这就是它垂直居中而不设置明确高度的方式。所以这就是为什么我不能使用 h2 的背景进行过渡。

【解决方案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。这样它是动态的（图像是流动的，没有固定的高度或宽度）并且标题自动垂直和水平居中。

【讨论】：