JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<a href="#" class="img img01">
    <img class="img01" src="http://kenwatanabe.info/library/feature_twitter_trending_olympics_1600x900.jpg"/>
    <div class="object-text-container" id="keepontop">
        <div class="object-text">
            <h1>img01 Text<br/>img01 Text</h1>
        </div>
    </div>
</a>

<a href="#" class="img img02">
    <img class="img02" src="http://kenwatanabe.info/library/feature_howells_1600x900.jpg"/>
    <div class="object-text-container" id="keepontop">
        <div class="object-text">
            <h1>img02 Text<br/>img02 Text</h1>
        </div>
    </div>
</a>

<div id="filler"></div>

CSS

html, body {
    width:100%;
    height:100%;
}
#filler {
    display:none;
    width:100%;
    height:100%;
    position:fixed;
    background-color: white;
    z-index:1000;
    opacity: 0.8;
}
h1 {
    font-size:20px;
    font-family: sans-serif;
    font-weight: 100;
    font-style: normal;
    color: red;
}
.img01, .img02 {
    position:relative;
    padding:40px;
}
img {
    width:900px;
    height:auto;
    display:block;
}
.img01 {top:5px; left:5px;}

a.top {
    z-index: 2000;
}
.object-text-container {
    top:20px;
    left:20px;
    width:47px;
    height:48px;
}
.object-text {
    position:fixed;
    top:20px;
    left:20px;
    display:none;
    z-index:15;
    width:47px;
    height:48px;
}
div#keepontop {
    position:absolute;
    z-index:14;
}

JavaScript

function reset() {
    $("#filler").fadeOut("slow", function () {
        $("a.img").removeClass("top");
    });
    $(".object-text").fadeOut("slow");
}

$("a.img").click(function (e) {
    var $filler = $("#filler");

    if ($filler.is(":visible")) {
        reset();
        return;
    }

    e.preventDefault();
    e.stopPropagation();
    $(this).addClass("top");
    $(this).find(".object-text").fadeIn("slow");
    $filler.fadeIn("slow");
});

$(document).click(function () {
    reset();
});