Skip to content

Instantly share code, notes, and snippets.

@gondorle

gondorle/hover-Effect.markdown

Created March 13, 2014 18:27
Show Gist options
  • Save gondorle/9533991 to your computer and use it in GitHub Desktop.
Save gondorle/9533991 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Joao Nascimento.
Raw
index.html
<body>
<div class="con">
<div class="content">
<ul class="circle fade">
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
<li><a href="#">five</a></li>
<li><a href="#">six</a></li>
</ul>
</div>
</div>
</body>
Raw
script.js
setTimeout(function() {
$('li').each(function(e) {
$(this).delay(500*e).fadeIn(500);
});
}, 1000);
/*
Adapted from http://tympanus.net/codrops/2011/10/19/blur-menu-with-css3-transitions/
*/
Raw
style.less
html{
height:100%;
}
body{
height: 100%;
margin:0;
padding:0;
overflow-x: hidden;
background: url(http://picjumbo.picjumbocom.netdna-cdn.com/wp-content/uploads/IMG_6640-1300x866.jpg);
background-color: rgba(0, 0, 0, 0);
background-repeat: repeat, no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
ul, li{
list-style:none;
}
a{
text-decoration:none;
}
p{
color:#fff;
}
.con{
position:relative;
height: 100%;
.content{
position: relative;
width: 600px;
height: 100%;
margin: 0 auto;
z-index:1;
.circle{
padding: 50px 0px;
margin: 0 auto;
position: fixed;
top: 50%;
margin-top: -250px;
left: 50%;
margin-left: -250px;
background: rgba(156, 156, 156, 0.4);
width: 500px;
height: 400px;
-webkit-border-radius: 250px;
-moz-border-radius: 250px;
border-radius: 250px;
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
-o-animation: fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-o-animation-duration: 1s;
animation-duration:1s;
&.fade {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
-o-animation-delay: 0.7s;
animation-delay: 0.7s;
}
&:hover{
background: rgba(0,0,0,0.2);
}
li{
display:none;
a{
display:block;
text-align:center;
color:rgba(255, 255, 255, 0.8);
font-size:18px;
text-transform:uppercase;
letter-spacing:5px;
padding: 23px 0;
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
&:hover{
a{
color:#fff;
/* font-size: 25px; */
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
-webkit-transform: scale(1.4);
}
}
}
}
}
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment