css image mask overlay

Question

I'm trying to get a transparent png frame image to hover over an img tag to create the look of a frame over it. I've tried multiple different approaches and none seem to work.

The latest method I used was http://www.cssbakery.com/2009/06/background-image.html this doesn't seem to work either.

HTML

<div class="filler">
    <div class="filler-picture">
        <img src="../../media/img/test.jpg" alt="test" />
        <div class="filler-mask">&nbsp;</div>
    </div>
</div>

CSS

.filler {

    padding-left:20px;
    height:361px;
    width:559px;
    float:left;

}

.filler-mask {

    background: url('..img/filler.png') no-repeat;
    position: absolute;
    left:0; top:0;
    height:361px;
    width:559px;

}

.filler-picture {

    z-index: 0;
    background: url('..img/test.jpg') no-repeat;
    position: relative;
    height: 361px;
    width: 559px;
    display: block;

}

Does anyone have any idea why this isn't working.

Answer 1

you could put 2 absolute divs under filler-picture with different z-index

<div class="filler">
    <div class="filler-picture">
        <div class="filler-img">
            <img src="../../media/img/test.jpg" alt="test" />
        </div>
        <div class="filler-mask">
            <img src="../../media/img/filler.png" alt="filler" />
        </div>
    </div>
</div>

CSS

.filler-mask {
    position: absolute;
    left:0; top:0;
    height:361px;
    width:559px;
    z-index: 900;
}

.filler-img{
    position: absolute;
    left:0; top:0;
    height:361px;
    width:559px;
    z-index: 50;
}

instead of using the image as a background you could put the image directly but images don't follow z-index so you have to wrap the images in divs.