Probleme mit CSS-Übergang

Question

Ich versuche, eine einfache CSS-Übergang, wo es eine Maske über ein Element und wenn der Benutzer über das Element schwebt die Maske Deckkraft geht auf 0 und das Element ist voll sichtbar. Das Problem ist, dass ich, wenn ich die Maske in der Position zu platzieren, zum Beispiel:

<div class="tile"> 
    Home 
    <div class="mask"></div> 
</div> 

<div class="tile"> 
    About 
    <div class="mask"></div> 
</div> 

Die Maske mit dem anderen Elemente bewegt sich nach unten. So bewegt sich zum Beispiel die Maske von der "Heim" -Kachel zur ungefähren Kachel und die Maske von der "ungefähr" -Kachel bewegt sich abwärts zu dem, was danach ist. Wie behebe ich das? Vielen Dank!

Hier ist die js Geige dafür: http://jsfiddle.net/5bL8H/

Answer 1

Sie es mit der Magie der absoluten innen relativ sehr leicht tun können:

.tile {position:relative;} 
.tile .mask {position:absolute;left:0;right:0;top:0;bottom:0;} 

Sie auch die Höhe und Breite entfernen - rechts und untere Werte werden dafür sorgen.

Beispiel: http://jsfiddle.net/5bL8H/2/