Css overlay image

HTML

<div class="list">
    <div class="badge-wrapper">
        <img src="http://www.clipartlord.com/wp-content/uploads/2014/02/police-badge2.png" alt="badge" />
        <div class="badge-progress"></div>
    </div>
    <div class="badge-wrapper">
        <img src="http://www.clipartlord.com/wp-content/uploads/2014/02/police-badge2.png" alt="badge" />
        <div class="badge-progress"></div>
    </div>
</div>

CSS

body {
    margin: 50px;
    background: rgba(150, 200, 250, 0.1);
}
.list .badge-wrapper {
    position: relative;
    display: inline-block;
    margin: 15px;
    width: 75px;
    height: 75px;
}
.list .badge-wrapper img {
    width: 100%;
    height: 100%;
}
.list .badge-wrapper .badge-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 50%;
    background: rgba(50, 250, 50, 0.5);
}