console
<div class="wrap">
<div class="box">
<i class="right"></i>
</div>
</div>
.wrap {
padding: 50px;
background: #fff;
}
.box {
overflow:hidden;
position: relative;
width: 240px;
height: 200px;
background: #89d04f;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.box:hover {
transform: translateY(-6px);
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
-webkit-box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
-moz-box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
}
.box .right {
cursor: pointer;
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background-image: -webkit-linear-gradient(0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5),hsla(0,0%,100%,0));
transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-webkit-transform: skewx(-25deg);
}
.box:hover .right {
-webkit-transition: all .3s ease;
transition: all .3s ease;
left: 100%;
}