JSFiddle - React, Tailwind, and code Playground

by Blake Plumb

HTML

<div id="buttons">
   <ul>
       <li data-move="25" id="0">button0</li>
       <li data-move="50" id="1">button1</li>
       <li data-move="75" id="2">button2</li>
       <li data-move="100" id="3">button3</li>
   </ul>
</div>
<div id="image">
    <div id="overlay"></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

#image{
        width: 128px;
        height: 128px;
        position: relative;
    }
    #overlay{    
        width:128px;
        height:128px;
        background-color:black;
        z-index: 10;
        position: absolute;
    }
#image{
    position: relative;
    overflow: hidden;
}

JavaScript

$('#buttons li').click(function(){
    $('#overlay').animate({top: $(this).data('move')+'%'}, 500);
});