Div over Img

by ctwheels

HTML

<div id="container">
    <img id="iconImg0-1" class="iconImg" src="http://upload.wikimedia.org/wikipedia/commons/0/0e/App-icon.png">
    <img id="iconImg0-2" class="iconImg" src="https://www.bellbanks.com/wp-content/uploads/2013/02/mobile-app-icon.jpg">
    <div id="num0-1" class="iconNumber">0/3</div>
    <div id="num0-2" class="iconNumber">2/3</div>
</div>

CSS

#container {
    width:200px;
    height:100px;
}
.iconImg {
    height:50px;
    width:50px;
    position:relative;
}
.iconNumber {
    position:absolute;
    background-color:rgba(180, 180, 180, 0.7);
    text-align:center;
}

JavaScript

var numIconNumber = $(".iconNumber").length;
for (var i = 0; i <= numIconNumber; i++) {
    var myId = $(".iconNumber:eq(" + i + ")").attr("id");
    var myIdNum = myId.replace("num", "");
    var myImg = $("#iconImg" + myIdNum);
    var myNum = $("#" + myId);
    myNum.css({
        width: myImg.width() + "px",
        left: myImg.offset().left + "px",
        top: (myImg.offset().top + myImg.height()) - myNum.height()/2 +"px"
    });
}