位置转换:绝对标题和背景 [英] Transition on position:absolute header and background

问题描述

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

I'm trying to apply a hover state to some portfolio navigation. It's a horizontally and vertically centered header on top of an image. The centering works as I need it to (there are reasons for it being as complicated as it is, or believe me, I would do it some other way).

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

But the hover state is giving me problems. I'm trying to do something like this: http://jsfiddle.net/kmjRu/33/. Which is a transition of the h2 and its background on hover of the image. I can get it almost working by fiddling with opacity or the z-index of the h2, but especially the change of the background color is not working (because there are no elements exactly covering the image, of which I can change the background). Does anyone know how to get the hover state working properly?

这是我拥有的代码，我正在尝试让这种悬停效果发挥作用:

This is the code I have and on which I'm trying to get this hover effect to work:

(也在这里发布: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;
}

推荐答案

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

So, I solved the question by doing it like this:

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.这样它是动态的(图像是流动的，没有固定的高度或宽度)并且标题自动垂直和水平居中.

See this fiddle. That way it's dynamic (the image is fluid and there are no fixed heights or widths to it) and the headline is automatically centered vertically and horizontally.

这篇关于位置转换:绝对标题和背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！