JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    
    <div class="overlay top" id="overlay">
        Wooden Wardrobe
    </div>
    
    <img src="http://xxxlutz.scene7.com/is/image/xxxlutz/001948008246/SCHWEBETRENSCHRANKinEichefarbenWei/7IDqiuMfV176cODcZgN-27SA4SM/7IDqiuMfV176cODcZgN-27SA4SM.jpg%3Fwid%3D200%26hei%3D200%26qlt%3D90%26resmode%3Dsharp2%26fit%3Dfit,1%26261f" alt="" />
    
</div>

<button id="button" type="button" style="margin-top: 20px;">
    change position
</button>

CSS

.box {
    border: 1px solid rgb(0, 0, 0);
    position: relative;
}

.box,
.box img {
    height: 200px;   
    width: 200px;
}

.box .overlay {
    background-color: rgba(0, 0, 0, 0.50);
    color: rgb(255, 255, 255);
    padding: 10px 20px;
    position: absolute;
    width: 160px;
}
    .box .overlay.top {
        top: 0px;
    }
    .box .overlay.bottom {
        bottom: 0px;
    }

JavaScript

document.getElementById('button').onclick = function() {
    
    var e = document.getElementById('overlay');
    e.className = ( e.className === 'overlay top' ? 'overlay bottom' : 'overlay top' );
};