Search code examples
cssimageoverlayribbon

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

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:
enter image description here
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/

Solution

  • 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.