CSS notification style badge over image

Question

I'm attempting to place a 'notification' style badge over an images. I am using Twitters Bootstrap as a base framework and creating a custom CSS class called notify-badge. But I cannot get anything to line up properly.

Through the magic of Photoshop, here is what I am trying to accomplish.

Here is my CSS code.

.notify-badge{
    position: absolute;
    background: rgba(0,0,255,1);
    height:2rem;
    top:1rem;
    right:1.5rem;
    width:2rem;
    text-align: center;
    line-height: 2rem;;
    font-size: 1rem;
    border-radius: 50%;
    color:white;
    border:1px solid blue;
}

I would like to be able to place any small about of text in the badge and it expand the red circle to fit.

Here is my HTML code.

<div class="col-sm-4">
 <a href="#">
     <span class="notify-badge">NEW</span>
     <img src="myimage.png"  alt="" width="64" height="64">
 </a> 
    <p>Some text</p>
</div>

Does this answer your question? [Easiest CSS for "red circle" notification badge with count](https://stackoverflow.com/questions/5747863/easiest-css-for-red-circle-notification-badge-with-count) — Inigo, Mar 11 '22 at 12:40

score 70 · Accepted Answer · edited Mar 18 '22 at 19:39

70

Bunch of different ways you can accomplish this. This should get you started:

.item {
    position:relative;
    padding-top:20px;
    display:inline-block;
}
.notify-badge{
    position: absolute;
    right:-20px;
    top:10px;
    background:red;
    text-align: center;
    border-radius: 30px 30px 30px 30px;
    color:white;
    padding:5px 10px;
    font-size:20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
    <div class="item">
        <a href="#">
            <span class="notify-badge">NEW</span>
            <img src="https://picsum.photos/200"  alt="" />
        </a>
    </div>
</div>

Addendum (from the Asker @user-44651)

(moved from the question)

Here is the result of applying this answer.

Adding margin-top:-20px; to .item fixed the alignment issue.

edited Mar 18 '22 at 19:39

Inigo

12,186
5
41
70

answered Jan 08 '16 at 20:19

APAD1

13,509
8
43
72

This is it! However, if this is used in a column, this item div gets pushed down. Any way to make the badge overlap its container? – user-44651 Jan 08 '16 at 20:24
See the updated question with the added image for reference @apad1 – user-44651 Jan 08 '16 at 20:30
The unnecessary reliance on bootstrap has already caused this answer to break. Run it now and see. There are working answers on the question this one is a dupe of: https://stackoverflow.com/questions/5747863/easiest-css-for-facebook-style-red-notifications – Inigo Mar 11 '22 at 13:19
@Inigo OP was using Bootstrap and tagged the question with Bootstrap, so to them it was necessary. Besides, Bootstrap is not the reason the answer was not working(nor does the answer rely on Bootstrap), rather it was the image placeholder website which was no longer serving up the image. – APAD1 Mar 18 '22 at 02:41
"nor does the answer rely on Bootstrap"... that's my point! Even in the question (both current form and original), the only thing bootstrap is `class="col-sm-4"` and that is completely irrelevant. The OP could have unnecessarily tagged it `png` as they're trying to decorate a PNG file, and we moderators would clean that up. As moderators we're supposed to improve the site, making questions and answers more useful to more people, removing redundancies and other noise. – Inigo Mar 18 '22 at 19:33
I just noticed the OP added the results of your answer and a fix to it in their question... That goes against SO's policies. So I'm gonna move that part into your question as an addendum. You can revert the change to your answer if you wish, but it doesn't belong in the question. – Inigo Mar 18 '22 at 19:35

score 5 · Answer 2 · answered Jan 08 '16 at 20:17

The idea here is to overlay an absolute container on top of a relative one. Here's a similar example:

<div class="image">
      <img src="images/3754004820_91a5c238a0.jpg" alt="" />
      <h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>

The CSS:

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

This is going to put our text right up on top of the image nicely, but it doesn't accomplish the box we want to achieve behind the text. For that, we can't use the h2, because that is a block level element and we need an inline element without an specific width. So, wrap the h2 inside of a span.

<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>

Then use that span to style and text:

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

For ideas on how to ensure proper spacing or to use jQuery to cleanup the code a bit by allowing you to remove some of the tags from the code and jQuery them back in, check the source.

TRose · Answer 3 · 2016-01-08T20:20:01.993

3

Here's a fiddle I made with the sample code:

https://jsfiddle.net/un2p8gow/

I changed the notify-badge span into a div. I saw no reason it had to be a span.
I changed the position to relative. Edit - you could actually keep the attribute position: absolute; provided you know what you're doing with it. Guy in the comments was right.
You had the attribute right: 1.5rem; and I simply changed it to left because it was being inset in the opposite direction of your example.

You can tweak it further but in a vacuum this is what you want.

edited Jan 08 '16 at 20:20

answered Jan 08 '16 at 20:13

TRose

1,718
1
16
32

Using position relative is not ideal because the space that it took up before the positioning has been applied will still be present. Position absolute will pull the element out of the context and prevent the unwanted space from pushing the image down. – jeffjenx Jan 08 '16 at 20:16
You know what? You're right. My mind was somewhere else. A strong distrust of `position:absolute;` is just lodged in my brain. – TRose Jan 08 '16 at 20:17
Also, using a span is more appropriate since the OP wants the badge to grow based on the content that is within it, although they probably need to use `display: inline-block;`. Having a fixed width limits their flexibility. P.S. there is nothing wrong with position absolute when used appropriately. – jeffjenx Jan 08 '16 at 20:18
That was my thought process. – TRose Jan 08 '16 at 20:20

CSS notification style badge over image

3 Answers3

Addendum (from the Asker @user-44651)

Linked