JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 project">
        <a href="#">
            <div class="img-overlay">
                <img src="http://www.ajpn.org/images-comms/1312352227_rodez.JPG" class="img-responsive"/>
                <div class="project-overlay"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ac/Rond_rouge.png" class="img-responsive" style="position:absolute; width: 2%; height:3%; top: 70%; left:90%;"/></div>
                <div class="project-overlay"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ac/Rond_rouge.png" class="img-responsive" style="position:absolute; width: 2%; height:3%; top: 35%; left:45%;"/></div>
                <div class="project-overlay"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ac/Rond_rouge.png" class="img-responsive" style="position:absolute; width: 2%; height:3%; top: 15%; left:20%;"/></div>
            </div>
        </a>
    </div>
</div>

CSS

.img-overlay {
    position: relative;
    max-width: 640px;
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}