JSFiddle - React, Tailwind, and code Playground

by onahapa

HTML

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

CSS

* {
    font-family: sans-serif;
    margin: 0;
    padding: 0;   
}

body {
    background-color: #5a5a5a;
}

.container {
    margin: 300px auto 0;
    width: 220px;
}

.music{
	position:relative;
}

.music .music-image{
	position:relative;
	z-index:1;
	transition:.5s;
}

.music-image > img {
    border: 10px solid #fff;
}

.music-button{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
}

.music-button img{
	float:right;
	clear:right;
}

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