JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <ul>
        <li id="dum1"> 
            <a class="insImg" href="#">
                <img class="imapa-foto" src="http://www.dolejsialej.cz/photo/thumbs/RD2-mars.jpg" />
                Dům 1
            </a>
        </li>
        <li id="dum2"> 
            <a class="insImg" href="#">
                <img class="imapa-foto" src="http://www.dolejsialej.cz/photo/thumbs/RD2-prodesi.jpg" />
                Dům 2
            </a>
        </li>
        <li id="dum3">
            <a class="insImg" href="#">
                <img class="imapa-foto" src="http://www.dolejsialej.cz/photo/thumbs/ikona.jpg" />
                Dům 3
            </a>
        </li>
        <li id="dum4">
            <a class="insImg" href="#">
                <img class="imapa-foto" src="http://www.dolejsialej.cz/photo/thumbs/RD1-prodesi.jpg" />
                Dům 4
            </a>
        </li>
    </ul>
</div>

CSS

#main {
    width: 302px;
    height: 401px;
    position: relative;
}
ul li {
    width: 140px;
    height: 40px;
    display: block;
    list-style: none;
    background: #141312;
    padding: 155px 5px 5px 5px;
}
ul li#dum1 {
    position: absolute;
    left: 1px;
    top: 0;
}
ul li#dum2 {
    position: absolute;
    right: 0;
    top: 0;
}
ul li#dum3 {
    position: absolute;
    left: 1px;
    bottom: 0;
}
ul li#dum4 {
    position: absolute;
    right: 0;
    bottom: 0;
}
ul li a {
    text-decoration: none;
    -moz-opacity: 1;
    opacity: 1;
    color: #fff;
}
ul li img {
    width: 150px;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

$('.insImg').click(function () {
    alert('OK')
    return false;
});