JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="hitTest"></div>
    <div class="infoCloud"></div>
</div>

CSS

.wrapper {
    width: 500px;
    height: 500px;
    background: #ccc;
}

.hitTest {
    position: absolute;
    width: 350px;
    height: 260px;
    background: #000;
}

.infoCloud {
    width: 315px;
    height: 230px;
    background: url(http://pogoria.codivate.pl/templates/karolinka/img/infoCloud.png) no-repeat;
    display: block;
    position: absolute;
    border: 1px red solid;
}

JavaScript

$(".hitTest").click(function() {
    alert('black box hit');
    return false;
});



jQuery.fn.infoBoxSplit = function(p) {
    $(this).each(function(i, e) {
        e = $(e);
        e.css('height', '201px')
        var h = 30;
        for (var j = 0; j < Math.ceil(30 / p); j++, h -= p) {
            var diff = p / 30 * 21 * j;
            e.append($(document.createElement('div')).css({
                height: Math.min(p, h) + 'px',
                border: '1px red solid',
                background: 'url(http://pogoria.codivate.pl/templates/karolinka/img/infoCloud.png) no-repeat scroll -' + (28 + diff / 2) + 'px -' + (201 + 30 - h) + 'px',
                marginLeft: diff / 2 + 28 + 'px',
                width: 21 - diff + 'px',
                marginTop: (!j ? "201px" : '')
            }));
        }
    });
};
$('.infoCloud').infoBoxSplit(5);