JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
      <div class="smbpipe">
        <img class="bottom01" src="http://dev.bowdenweb.com/a/i/dev/mario-01.png" alt="Mario NES SMB Character" title="Hold Your Cursor Over Me Boi!" height="256" width="256" />
        <img class="smbrospipe" src="http://dev.bowdenweb.com/a/i/dev/mario-pipe-shitty-01.png" alt="NES SMB Pipe Image" height="330" width="264" />
      </div>
    </div>

CSS

.block{margin-top:10px; margin-bottom:10px; position:relative}
.smbpipe{background-color:#679ef6; width:264px; height:594px; overflow:hidden; position:relative}
.smbrospipe{position:absolute; left:0; bottom:0; z-index:1000; width:264px; height:330px}
.bottom01{position:absolute; left:0; z-index:10; cursor:pointer;
-moz-transition-property:bottom; -moz-transition-duration:5s;
-o-transition-property:bottom; -o-transition-duration:5s;
-webkit-transition-property:bottom; -webkit-transition-duration:5s;
transition-property:bottom; transition-duration:5s;
bottom:324px}
.bottom01:hover{
-moz-transition-property:bottom; -moz-transition-duration:5s;
-o-transition-property:bottom; -o-transition-duration:5s;
-webkit-transition-property:bottom; -webkit-transition-duration:5s;
transition-property:bottom; transition-duration:5s;
bottom:0}