Transition on position:absolute header and background - html

Question

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).
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:
(Also posted here: http://jsfiddle.net/kmjRu/34/)
HTML
<article>
<div class="img-crop">
<h2>Title</h2>
<img src="http://bit.ly/gUKbAE" />
</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;
}
This could be it!

Answer 2

Basically, you need to make sure following things.
your h2 should be exactly equal to the container behind, only then it will perform a total overlay.
set the default opacity of h2 to be 0. and change/transition it to some mid value say 0.6 upon hover.
now also, you need to make the background-color of the h2 black, or different than the parent container, only then it will appear.
and then give appropriate padding to the h2 element, to make the text appear in the middle.
set h2 like this:
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;
}
and set your h2:hover like this:
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;
}
see this fiddle

Answer 3

So, I solved the question by doing it like this:
HTML
<article>
<div class="item">
<h2>Title</h2>
<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%;
}
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.