Adding Badge Over Product Photo

Highlighted
New Member
1 0 0

I am using the Debut theme. I want to use a badge over the product image. I use this code for testing given below

 <div class="col-sm-4">
  <div class="item">
  <a href="#">
<span class="notify-badge">New</span>
      </a>
</div>
</div>

 and SCSS

.item {
    position:relative;
    padding-top:20px;
    display:inline-block;
}
.notify-badge{
    position: absolute;
    right:-200px;
    top:10px;
    background:red;
    text-align: center;
    border-radius: 30px 30px 30px 30px;
    color:white;
    padding:5px 10px;
    font-size:20px;
 
}
 
But my badge is showing under the product image. The attachment is given below.
screenshot_badge_over_produc_image.JPG
I would be grateful if you fix the code problem. 
0 Likes