JSFiddle - React, Tailwind, and code Playground

by pixeloco

HTML

<div class="thumb">
	<div class="inner">
        <img src="http://distilleryimage4.ak.instagram.com/b669d432627411e2a7f322000a1f9a55_7.jpg" />
		<div class="content">
			<div class="wing">hello!</div>
		</div>
	</div>
</div>

CSS

img  {
height: auto; max-width: 100%;
}

.thumb {
height:200px; width:250px;
margin:0 auto;
}

.inner {
width:100%; height:100%;
overflow:hidden;
background-color:black;
position:relative;
}

.content {
   position: absolute;
   overflow: hidden;
   top: 0; left: 0;
   height:100%; width:100%;
}

.thumb img {
   display: block;
   position: relative;
   -webkit-transition: all .8s ease; -moz-transition: all .8s ease; -o-transition: all .8s ease; -ms-transition: all .8s ease; transition: all .8s ease;
}

.thumb:hover img {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); opacity: .2;
}

.wing {
   color: #fff; text-align: center; font-size: 18px;
   position: relative;
   top:135px;
   left:0px;
   background-image:url('http://stacyrobyn.com/dev/images/wing.png');
   width:194px; height:65px;
   cursor:pointer;
    
   -webkit-transform: translate(-150px, 100px)rotate(-90deg); -moz-transform: translate(-150px, 10px) rotate(-90deg); -o-transform: translate(-150px, 100px) rotate(-90deg); -ms-transform: translate(-150px, 100px) rotate(-90deg); transform: translate(-150px, 100px) rotate(-90deg);
    
   -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; -ms-transition: all .5s ease-out; transition: all .5s ease-out;
}

.thumb:hover .wing {
   -webkit-transform: translate(0px,0px); -moz-transform: translate(0px,0px); -o-transform: translate(0px,0px); -ms-transform:translate(0px,0px); transform: translate(0px,0px);
}

JavaScript

$('img').click(function () {
    $('.wing').animate({
    'transform': 'translate(0px,0px)'
    }, 500);
});

$('body').click(function () {
    $('.wing').animate({
      'transform': 'translate(-150px,100px)'
    }, 500);
});