Slanted Div Hover Troubles

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

score 2 · Accepted Answer · edited May 23 '17 at 10:28

2

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.}

edited May 23 '17 at 10:28

Community

1
1

answered Mar 21 '16 at 13:27

jbutler483

22,332
8
78
135

sorry, it didn't solve my problem, notice the blank area at the slanted angle lower right of div is still hoverable, I don't want that to happen – kenwin Mar 21 '16 at 13:47
@kenwin: Can I just confirm you are referring to my example above? If I hover any of the blue/black gradient area, there is no hover state shown. – jbutler483 Mar 21 '16 at 13:54
yes I'm referring to your example- here's what I mean: find the top right corner of the div, follow it to the bottom corner where it angles, it still hovers if your mouse is on the gradient, just a bit out of the bottom edge. in short it hovers like a rectangle, I want the hover to follow the shape. Thanks – kenwin Mar 21 '16 at 14:32
I just tested in different browsers, some work some don't >< is there a way to make it all work the same on all browsers? Thanks – kenwin Mar 21 '16 at 14:34
@kenwin Please note some browsers will require prefixing for certain properties (such as `transform`). Could you please advise which browsers are causing problems? – jbutler483 Mar 21 '16 at 14:42
I've tested it again, only IE11 doesn't work properly, is there a fix to it, can you also explain what's the cause of the problem in my code compared to yours? so I can understand it fully and prevent it in the future. Many Thanks – kenwin Mar 21 '16 at 21:34

Slanted Div Hover Troubles

1 Answers1