I am seeking help to place badges on an image, similar to the example picture below. My knowledge of CSS is limited, so any assistance would be greatly appreciated.
.product {
margin: 0 30px 30px 0;
width: 360px;
position: relative;
float: left;
}
.image-product {
position: relative;
width: 100%;
height: 360px;
overflow: hidden;
border: solid;
border-width: 1px;
}
.image-product > a,
.image-product img {
display: block;
width: 100%;
height: 100%;
}<div class="product clearfix">
<div class="image-product">
<a href="#">
<img src="http://richthediabetic.com/wp-content/uploads/2013/07/Pizza.jpg" />
</a>
</div>
</div>