Decorate Your Images (CSS) ~ erastMedia

This post will show you how to decorate your images
and photo galleries without editing the source images
for your blogspot post. It is very easy and flexible.
All you need is an extra <span> tag and apply a background
image to create the overlaying effect.

The Benefits Of This CSS Trick
You don’t have to manually create the decorative template in Photoshop and export the individual image.
You don’t have to worry about changing the design theme in the future.
You can have a completely different look and feel by just editing the CSS.
It Works on Any Site — This CSS trick works on any type of site, with any image size.

Preview :

And here is how it works:

Put this CSS codes on your template (Dashboard > Layout > Edit Html) :

/* ---------- DECORATE YOUR IMAGES ----------------------- */
.photo {
margin: 10px;
position: relative;
width: 180px;
height: 130px;
float: left;
}
.photo img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.photo span {
width: 20px;
height: 18px;
display: block;
position: absolute;
top: 12px;
left: 12px;
background: url(http://suspended.fileave.com/deelpe/images/digg-style.gif) no-repeat;
}
.photo a {
text-decoration: none;
}

.sample1 span {
width: 28px;
height: 21px;
display: block;
position: absolute;
top: -12px;
left: 90px;
background: url(http://suspended.fileave.com/deelpe/images/pin.png) no-repeat;
}

.sample2 span {
width: 77px;
height: 27px;
display: block;
position: absolute;
top: -12px;
left: 50px;
background: url(http://suspended.fileave.com/deelpe/images/tape.png) no-repeat;
}

.sample3 span {
width: 30px;
height: 60px;
display: block;
position: absolute;
top: -5px;
left: -2px;
background: url(http://suspended.fileave.com/deelpe/images/paper-clip.png) no-repeat;
}

.sample4 span {
width: 115px;
height: 32px;
display: block;
position: absolute;
top: -13px;
left: 30px;
background: url(http://suspended.fileave.com/deelpe/images/tape2.png) no-repeat;
}

.sample5 span {
width: 216px;
height: 166px;
display: block;
position: absolute;
top: -17px;
left: -18px;
background: url(http://suspended.fileave.com/deelpe/images/gold-frame.png) no-repeat;
}

.sample6 span {
width: 189px;
height: 137px;
display: block;
position: absolute;
top: -5px;
left: -5px;
background: url(http://suspended.fileave.com/deelpe/images/cut-corner.png) no-repeat;
}

.sample10 span {
width: 181px;
height: 134px;
display: block;
position: absolute;
top: -6px;
left: -6px;
background: url(http://suspended.fileave.com/deelpe/images/brush-border.png) no-repeat;
}
.sample10 img {
border: none;
padding: 0;
}

.sample11 span {
width: 122px;
height: 72px;
display: block;
position: absolute;
top: -22px;
left: -15px;
background: url(http://suspended.fileave.com/deelpe/images/floral-corner.png) no-repeat;
}

.sample12 span {
width: 186px;
height: 137px;
display: block;
position: absolute;
top: 2px;
left: 2px;
background: url(http://suspended.fileave.com/deelpe/images/watercolor-top.png) no-repeat;
}
.sample12 img {
border: none;
padding: 9px 12px 12px 11px;
background: url(http://suspended.fileave.com/deelpe/images/watercolor-bg.png) no-repeat;
}

.sample13 span {
width: 170px;
height: 120px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(http://suspended.fileave.com/deelpe/images/mask.png) no-repeat;
}
.sample13 img {
border: none;
padding: 0;
}

.sample14 span {
width: 170px;
height: 84px;
display: block;
position: absolute;
top: 5px;
left: 5px;
background: url(http://suspended.fileave.com/deelpe/images/glossy-gradient.png);
}
/*---------------- END of CODE -----------------*/

Then insert this code on your post :