JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<div id="main">
  <div id="left">
    <a href="##1"><img src="http://sinant.ucoz.ru/_ph/3/2/928701127.jpg" alt="">
</div></a>
  <div id="right">
   <a href="##2"> <img src="http://finobzor.ru/uploads/images/2016/448/org_qhig779.jpg" alt="">
</div></a>
 
 </div>

CSS

#main{
  width:500px;
  height:500px;
  position:absolute;
  background:#000;
  overflow:hidden;
}
#main #left{
  width:70%;
  overflow:hidden;
  height:100%;
  z-index:1001;
  position:absolute;
  left:-15%;
 	transform: skew(-15deg);
}
#main #left img:hover{  
  -webkit-filter: blur(0px);
 transition:.2s; 
}
#main #left img{
  -webkit-filter: blur(3px);
   transition:.2s; 
  transform: skew(15deg);
  height:100%
}
#main #right{
  width:60%;
  z-index:1000;
  overflow:hidden;
  height:100%;
  position:absolute;
  right:0%;
}
#main #right img:hover{
  -webkit-filter: blur(0px);
 transition:.2s; 
}
#main #right img{
  transition:.2s; 
  height:100%;
  -webkit-filter: blur(3px);
}