Skip to content

Instantly share code, notes, and snippets.

@shaina7837

shaina7837/hover.html

Created October 23, 2015 17:04
Show Gist options
  • Save shaina7837/ba084c6832e4d394bdb8 to your computer and use it in GitHub Desktop.
Save shaina7837/ba084c6832e4d394bdb8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
hover.html
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="image" id="hovering">
<div class="layer left"></div>
<div class="layer right"></div>
</div>
</body>
</html>
<script type="text/javascript">
console.log("shaina");
$("#hovering").hover(function(){
$(".right").css({"border-right":"210px solid #31a344", "border-top":"340px solid #31a344" });
$(".left").css({"border-left":"40px solid #31a344", "border-bottom":"340px solid #31a344" });
}, function(){
$(".right").css({"border-right":"0px solid #31a344", "border-top":"0px solid #31a344" });
$(".left").css({"border-left":"0px solid #31a344", "border-bottom":"0px solid #31a344" });
}
);
</script>
Raw
style.css
#hovering{
height:340px;
width:250px;
}
.image {
background:url("image1.jpg") no-repeat;
position:relative;
}
.layer{
width: 0;
height: 0;
position:absolute;
float:left;
}
.right{
z-index:200;
border-right: 0px solid #31a344;
border-left: 40px solid transparent;
border-top: 0px solid #31a344;
transition:border-top 1s ease;
}
.left{
z-index:100;
border-left: 0px solid #31a344;
border-right: 210px solid transparent;
border-bottom: 0px solid #31a344;
transition:border-bottom 1s ease;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment