JSFiddle - React, Tailwind, and code Playground

HTML

<div id="buttons">
    <ul> <a href="#" class="btn" onclick="showImage('#overlay0');">button0</a>
 <a href="#" class="btn" onclick="showImage('#overlay1');">button1</a>
 <a href="#" class="btn" onclick="showImage('#overlay2');">button2</a>
 <a href="#" class="btn" onclick="showImage('#overlay3');">button3</a>

    </ul>
</div>
<div id="image">
    <div id="overlay0"></div>
    <div id="overlay1"></div>
    <div id="overlay2"></div>
    <div id="overlay3"></div>
    <div id="reveal">
        <img src="http://science.nasa.gov/media/medialibrary/2010/03/31/sn_remnant_n63a.jpg/image_thumb" height="128" width="128" />
    </div>
</div>

CSS

.btn {
    display: inline-block;
    padding:5px 10px;
    margin: 5px;
    border: 1px solid #666;
}
#image {
    width: 128px;
    height: 128px;
    position: relative;
}
#overlay0, #overlay1, #overlay2, #overlay3 {
    width:64px;
    height:64px;
    background-color:white;
    z-index: 10;
    position: absolute;
    border: 1px solid #555;
}
#overlay0 {
    top: 0;
    left: 0;
}
#overlay1 {
    top: 0;
    left: 64px;
}
#overlay2 {
    top: 64px;
    left: 0;
}
#overlay3 {
    top: 64px;
    left: 64px;
}

JavaScript

function showImage(id) {
    $(id).toggle();
}