JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div class="main"><img src="http://dev.boutiquevalmont.com/media/wysiwyg/valmont/arts/thb3.jpg" height="250" width="378"><div class="content"><button>Pepe Kalvier Switches</button></div></div>

CSS

.main 
{
position:relative;
 border: 10px solid white;
 width:378px;
 height:250px;
 margin:50px auto;
 box-shadow:0px 0px 25px black;
 overflow:hidden;
 }

.content 
{ 
    width:378px;
    height:250px;
    background: rgba(124,120,120,0.5);
    -webkit-transition: -webkit-transform: 300ms;
    z-index: 99;
    position: absolute;
    top:0;
}

.main:hover img 
{
-webkit-transform:scale(2,2) rotate(45deg);
}

.main:hover .content 
{
-webkit-transform:translate(-311px);
}

img 
{
-webkit-transition: -webkit-transform: 300ms;	
}

.content 
{ 
	width:378px;
 	height:250px;
	background: rgba(124,120,120,0.5);
    -webkit-transition: -webkit-transform: 300ms;
}
   
   button 
   {
	   width:100%;
	   height:50px;
	   margin-top:200px;
	   background:black;
	   border:0;
	   cursor:pointer;
	   color:white;
	   font:16px tahoma;
   }
   
   button:hover {
	  opacity: 0.5;
   }