JSFiddle - React, Tailwind, and code Playground

by cheack

HTML

<body>

<div class="container">
    <div class="music">
        <div class="music-image">
            <img src="http://lorempixel.com/200/200/people/" alt="music" class="img_m"/>
        </div>

        <div class="music-button">
            <a id="btn1">
                <img src="http://lorempixel.com/100/110/city/"/> 
            </a>
        
            <a id="btn2">
                <img src="http://lorempixel.com/100/110/people/"/> 
            </a>
        </div>
    </div>
</div>
    </body>

CSS

.music-image {
    position: absoLute;
    border: 10px solid #fff;
    z-index:2;
    transition: 0.5s;
    width:200px;
}

.music-image:hover {
    transform: translateX(-100px);
    width:300px;
}