This may seem trivial but I cannot seem to find an answer anywhere. I'm trying to make a border change to a gradient fill on hover.
Here's the codepen; https://codepen.io/gavdraws/pen/LyWJML
As you'll see, the vertical borders on each side work as intended, the horizontal ones do not.
EDIT: I've cleared the codepen clutter and created a fiddle; https://jsfiddle.net/6dwx4eos/
All help appreciated.
For clarification:
/* Working */
.frame.leftFrame {
top: 0px;
left: 0px;
border-left: 45px solid #EDEDED;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
height: 100%;
box-sizing: border-box;
}
.frame.leftFrame:hover{
border-left: 45px solid #F1612F;
-webkit-border-image:
-webkit-linear-gradient(bottom, #f26739, #f68a22); /* For Safari 5.1 to 6.0 */
-webkit-border-image:
-webkit-linear-gradient(bottom, #f26739, #f68a22) 1 100%;
-moz-border-image:
-moz-linear-gradient(bottom, #f26739, #f68a22) 1 100%;
-o-border-image:
-o-linear-gradient(bottom, #f26739, #f68a22) 1 100%;
border-image:
linear-gradient(to bottom, #f26739, #f68a22) 1 100%;
cursor: pointer;
}
/* Not Working */
.frame.topFrame {
top: 0px;
left: 0px;
border-top: 45px solid #EDEDED;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
height: 0px;
width: 100%;
box-sizing: border-box;
}
.frame.topFrame:hover{
border-top: 45px solid #F1612F;
content: "";
-webkit-border-image:
-webkit-linear-gradient(bottom, #f26739, #f68a22); /* For Safari 5.1 to 6.0 */
-webkit-border-image:
-webkit-linear-gradient(bottom, #f26739, #f68a22) 1 100%;
-moz-border-image:
-moz-linear-gradient(bottom, #f26739, #f68a22) 1 100%;
-o-border-image:
-o-linear-gradient(bottom, #f26739, #f68a22) 1 100%;
border-image:
linear-gradient(to bottom, #f26739, #f68a22) 1 100%;
cursor: pointer;
}
