JSFiddle - React, Tailwind, and code Playground

HTML

<div id="buttons">
   <ul>
       <li id="button0">button0</li>
       <li id="button1">button1</li>
       <li id="button2">button2</li>
       <li id="button3">button3</li>
   </ul>
</div>
<div id="image">
    <div id="overlay">
        <div id="op0" class="overlay-piece"></div>
        <div id="op1" class="overlay-piece"></div>
        <div id="op2" class="overlay-piece"></div>
        <div id="op3" class="overlay-piece"></div>
    </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>
<style>
    #image{
        width: 128px;
        height: 128px;
        position: relative;
    }
    #overlay{    
        width:128px;
        height:128px;
        z-index: 10;
        position: absolute;
    }
    .overlay-piece {
        background: white;
        height: 32px;
        width: 128px;
    }
</style>

JavaScript

$("#button0").click(function () {
    $("#op0").css('visibility', 'hidden');  
});
$("#button1").click(function () {
    $("#op1").css('visibility', 'hidden');  
});
$("#button2").click(function () {
    $("#op2").css('visibility', 'hidden');  
});
$("#button3").click(function () {
    $("#op3").css('visibility', 'hidden');  
});