JSFiddle - React, Tailwind, and code Playground

by petroveg

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

.music{
	float:left;
	position:relative;
	overflow:hidden;
	height:200px;
}
.music img{
	display:block;
}
.music .music-image{
	position:relative;
	z-index:1;
	transition:.5s;
}
.music .music-button{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
}
.music .music-button img{
	height:50%;
	float:right;
	clear:right;
}
.music:hover .music-image{
	transform:translateX(-90px);
}