CSS notification style badge over image

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.

enter image description here

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

enter image description here

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)