Slanted Div

Please help to solve the problem of hover state

HTML

<div id="slantedwrapper">
<div id="slanted">
      <a href="#">
  <div id="caption"> <p class="nonskew">A Caption: Description</p></div>
      <img src="http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg" alt="SLANTED DIV"></a>
      </div>
  <!--end of wrapper-->
</div>

CSS

body{background:black;}
#slantedwrapper{
	overflow:hidden;
	margin-left:50px;}
#slanted{
 display:inline-block;
 /* margin-right:-4px; */
 width: 400px;
 margin-left: -45px;
 /* background-image: url("http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg"); */
}
#slanted a {
   position:relative;
   background-color:#1d1d1d;
   /* background-image:  url("http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg"); */
   box-sizing: border-box;
   background-size: cover;
   /* padding:1em; */
   display:block;
   transform: skewX(-30deg);
   width:100%;
   min-height:3.5em;
   text-align: center;
   border-right:5px solid #20c397;
   height: 150px;
   /* line-height: 110px; */
   overflow: hidden;
 }
   #slanted span {
     color:white;
     position:absolute;
     box-sizing: border-box;
     transform: skewX(30deg);
     left: 0;
     width: 100%;
     /* height: 150px; */
     /* background-image: url("http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg"); */
   }
 }
}  
.current a {
 background:#70cb00;    
}
#slanted a img {
	transform: skewX(30deg);
	overflow: hidden;
	margin-top: -20px;
	padding-top: 0px;
	width: 123%;
	height: 123%;
	margin-left: -50px;
	opacity: 0.6;
	-webkit-transition: opacity 0.3s linear 0s;
	-o-transition: opacity 0.3s linear 0s;
	transition: opacity 0.3s linear 0s;
}
#slanted img:hover {
	opacity:1;
}
#caption {
    background-color: #333333;
    width: 100%;
    height: 25px;
    display: block;
    position: absolute;
    bottom: 0;
    z-index: 99;
    opacity: 0.7;
    color: #D2D2D2;
	-webkit-transition: background-color 0.3s linear 0s;
	-o-transition: background-color 0.3s linear 0s;
	transition: background-color 0.3s linear 0s;
}
/*Combination hover effects*/
#slanted:hover #caption{
	background-color: #20c397;
	opacity:1.0;
}
#slanted:hover img{
	opacity:1.0;
}
/* END OFCombo hover effects*/
p.nonskew {
    transform:...