Question

I’ve been trying to figure out exactly what these are called, and what library(s) you can use to implement them. Or maybe there’s a straight CSS solution that I haven’t seen?

Basically I want to add a label to the corner of some of my images. I want it to look like a pice of colored ribbon that says “New” or “Free”. But I can’t quite seem to figure out what these ribbons are called. Here’s an example (note: the label is in the upper right hand corner).

edit: I’m a new user so I can’t post images. Lame. But I understand the anti-spam premise behind it.
Instead, here’s a link to an example slideshow that has a “new” label across the corner:

http://www.slidesjs.com/

Googling has turned up “badges”, but they look more like the iPhone badges and that’s not what I want. Here’s what those look like. Notice the red badges also in the upper right of the two sections of text below.

edit: removed second image.

I also turned up this link while searching, but the badge used in the example is ugly.

Position badge over corner of image automatically.

So I’m wondering if I’ll have to create my own or if there’s a plugin or pre-made solution out there. Thanks in advance!

Answer 1

You don’t need Javascript for this. You can do it with good old css. Something along the lines of

#badge{
    position: absolute;
    top: 0p;
    left: 0px;
}

You can change top to bottom, and left to right if you want it to appear in a different corner. The you just put your badge in the same div as your image like:

<div>
    <img id="badge" src="..." />
    <img src="..." />
</div>

Oh, the container div also needs position: relative; for the position: absolute inside it to work. Here’s a link to a jsfiddle using images from the slideshow you linked me too:

http://jsfiddle.net/ky2Ac/

It looks a bit different because the added a white border around their image, but that’s easy enough to do. The point is the badge 🙂 Now you just need to find a good image with a transparant background to use for the badge (I don’t know what else to call it either).