How to put a ribbon image on another image with css?

Question

I would like to show a ribbon for some pictures on my project. Below the main image, I need to show a description. This is what I have right now:

<img src="images/img1" alt="" style="width:150px; height:150px"/>
<br />
<img src="images/ribbon.png" style="position:relative; top:-151px; left:49px" />
<br />
Description

Now, take a look at the images below:

What I need is the right one, but what I have now is the left one. The space between image and text must be remove. I also remove last <br /> but the problem did not solve.
Please help me to solve it.
jsfiddle: http://jsfiddle.net/4AXdy/

Answer 1

Here you go.

WORKING DEMO

The Code Change:

<img src="http://www.aroose-shahkar.com/images/ribbon.png" style="
left: 155px;
margin-left: -73px;
margin-top: -99px;
position: relative;
top: -99px;" />

Hope this is what you are looking for.