JSFiddle - React, Tailwind, and code Playground

by Nikita Karpov

HTML

<div>
    <img class="with-badge" src="http://lorempixel.com/output/food-q-c-640-480-9.jpg" />
    <span class="badge" data-info='This is Burger'>1</span>
</div>

CSS

body{
 font-family: Geneva, Arial, Helvetica, sans-serif;

}
img{
    width: 300px;
}
div{
    position: relative;    
}
img+.badge{
    color: white;
    position: absolute;
    top: 15%;
    right: 50%;
    padding: 0 0 5px 5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(60,60,60,.8);
    border: 3px solid white; 
    cursor: pointer;
}
img+.badge:hover{
 background: rgba(60,60,60,.7); 
 border-color:      rgba(230,230,230,1)
}

JavaScript

$('.badge').on('click', function(){
    alert($(this).attr('data-info'));
});