Question

I am trying to set up a simple css transition where there is a mask over an item and when the user hovers over the item the mask opacity goes to 0 and the item is fully visible. The problem I have is that when I place the mask in the item, for example:

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

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

The mask moves down to the other element. So for example, the mask from the “home” tile moves down to the about tile and the mask from the “about” tile moves down to whatever is after that. How do I fix this? Thanks!

Here is the js fiddle of this: http://jsfiddle.net/5bL8H/

Answer 1

You can do it very easily with the magic of absolute inside relative:

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

You can also remove the height and width – the right and bottom values will take care of that.

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