Наложение маски изображения CSS

Question

Я пытаюсь заставить прозрачное изображение рамки png навести курсор на тег img, чтобы создать на нем вид рамки. Я пробовал несколько разных подходов, и ни один из них не работает.

Последний метод, который я использовал, был http://www.cssbakery.com/2009/06/background-image.html, похоже, он тоже не работает.

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;

}

Кто-нибудь знает, почему это не работает?

Answer 1

Вы можете поместить 2 абсолютных деления под картинкой-заполнителем с другим z-индексом

<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;
}

вместо использования изображения в качестве фона, вы можете поместить изображениенепосредственно, но изображения не следуют за z-индексом, поэтому вы должны обернуть изображения в div.

Answer 2

Поскольку исходный вопрос ссылался на сообщение в моем блоге, я решил написать обновление для моего метода Cookie Cutter, используя разметку Нила в качестве примера.