superposición de máscara de imagen css

Estoy tratando de obtener una imagen de marco png transparente para pasar el cursor sobre una etiqueta img para crear el aspecto de un cuadro sobre ella. Probé con diferentes enfoques y ninguno parece funcionar.

El último método que utilicé fue http://www.cssbakery.com/2009/06/background-image.html. Esto tampoco parece funcionar.

HTML

test
 

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

¿Alguien tiene alguna idea de por qué esto no funciona?

podrías poner 2 divs absolutos debajo de filler-picture con diferentes z-index

 
test
filler

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

en lugar de utilizar la imagen como fondo, puede poner la imagen directamente, pero las imágenes no siguen el índice z, por lo que debe envolver las imágenes en divs.

Dado que la pregunta original hacía referencia a una publicación en mi blog, decidí escribir una actualización de mi Método Cookie Cutter utilizando el marcado de Neil como ejemplo.