CSS

Below is the base style for the .gallery. The key property you have to add is relative position on the .gallery a element.

.gallery {
	margin: 0 0 25px;
	text-align: center;
}
.gallery li {
	display: inline-block;
	margin: 5px;
	list-style: none;
}
.gallery a {
	position: relative;
	display: inline-block;
}

:before element

Now I'm going to specify a 30 x 60px container with the paper clip background image to the a:before element. Note that I leave the content property empty in the CSS rule. Without the empty content property, the container will not appear.

.clip a:before {
	position: absolute;
	content: ' ';
	top: -5px;
	left: -4px;
	px;
	px;
	"webdesignerwall.com/wp-content/uploads/2012/09/art-frame.jpg" align="before element">


.frame a:before {
	position: absolute;
	content: ' ';
	top: -22px;
	left: -23px;
	px;
	px;
	"webdesignerwall.com/wp-content/uploads/2012/09/tape-gallery.jpg" align="before element">


<ul>
	<li>
		<figure> 
			<img src="/img/spacer.gif"> 

CSS
In the CSS, I added two :before elements: one on the <figure> element and another one on the <li> element. The overlay.png (mask image) is applied to the figure:before element and the tape graphic is applied on the a:before element.

	 


.tape li {
	px;
	padding: 5px;
	margin: 15px 10px;
	border: solid 1px #cac09f;
	background: #fdf8e4;
	text-align: center;
	box-shadow: inset 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.2);
}
.tape figure {
	position: relative;
	margin: 0;
}
.tape a:before {
	position: absolute;
	content: ' ';
	top: 0;
	left: 0;
	%;
	%;
	"webdesignerwall.com/wp-content/uploads/2012/09/transform-gallery.jpg" align="before element">


.transform li:nth-of-type(4n+1) {
	-webkit-transform: rotate(2deg);
}
.transform li:nth-of-type(2n) {
	-webkit-transform: rotate(-1deg);
}
.transform li:nth-of-type(4n+3) {
	-webkit-transform: rotate(2deg);
}


Update:
I've updated the gallery demo and CSS so now the images are linked. Now the :before element is added to the  tag.