Slanted Div Hover Troubles - html

Question

I've created a Slanted Div, however I ran into problem I cannot solve, I've googled this but did not find any answers.
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: skewX(30deg);
color: White;
margin: 0;
margin-left: 22%;
padding: 1.5%;
text-align: left;
font-size: 0.8em;
}
<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>
JSFiddle version
here's the problem:
Hover over the div, it hovers fine, but at the bottom right corner, where nothing is there (where the overflow is hidden) still hovers if you place your mouse over the blank area where the angle begins, how do I solve this into when it hovers- it only applies to shape of the div only?
Thank you

Answer 1

You seem to have the right idea, using both the unskew and intuitive to using the skew, however, something like the below example may work for you:
html {
background: radial-gradient(#222, blue);
height: 100%;
}
div.wrap{
height: 150px;
width: 300px; position: relative;
overflow: hidden;
}
div.innerwrap {
height: 100%;
width: 100%;
transform: skewX(-30deg);
position: absolute;top:0;left:0;
overflow: hidden;
margin-left: -70px;
transition: all 0.4s;
border-right: 5px solid tomato;
cursor:pointer;
}
div.innerwrap:hover span {
background: gold;
}
div.innerwrap:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: url(http://lorempixel.com/300/300);
transform: skewX(30deg);
transform-origin: top left;
}
div span {
position: absolute;
bottom: 0;
left: 0%;
width: 120%;
transform: skewX(30deg);
background: red;
text-align:center;
transition: all 0.4s;
}
<div class="wrap">
<div class="innerwrap">
<span>TITLE</span>
</div>
</div>
For further information, #Harry has created a wide variety of examples here in which you may find useful.