Instantly share code, notes, and snippets.
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save bl4de/5662767 to your computer and use it in GitHub Desktop.
Some nice effect with CSS3 transitions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
font-family: Verdana, Arial; | |
font-size: 12px; | |
font-weight: normal; | |
padding: 0; | |
margin: 0; | |
} | |
body { | |
width: 960px; | |
text-align: center; | |
} | |
nav { | |
margin: 30px 20px; | |
} | |
ul { | |
list-style: none; | |
} | |
li { | |
position: relative; | |
/*border-right: 5px solid #fff;*/ | |
display: block; | |
float: left; | |
width: 200px; | |
height: 40px; | |
line-height: 36px; | |
font-size: 18px; | |
color: #0e0e0e; | |
} | |
.article-block { | |
display: inline-block; | |
position: relative; | |
width:300px; | |
height:260px; | |
background: url('burnaby-bc.jpg') top left no-repeat; | |
} | |
.article-block h2 { | |
font-size: 16px; | |
font-weight: 700; | |
margin: 20px 10px; | |
} | |
.article-block p { | |
margin: 0 20px; | |
color: #fefefe; | |
} | |
/* Universal effect for three elements */ | |
.hovered-layer { | |
position: absolute; | |
cursor: pointer; | |
top:0px; | |
left: 0px; | |
z-index: 100; | |
background-color: rgba(0,0,0,0.7); | |
width: 100%; | |
height: 100%; | |
-webkit-transition: all 0.6s ease-out; | |
-moz-transition: all 0.6s ease-out; | |
} | |
.hovered-layer.first:hover { | |
background-color: rgba(255,255,255,0.0); | |
width: 310%; | |
-webkit-transition: all color 0.3s ease-in; | |
-moz-transition: all 0.3s ease-in; | |
} | |
.hovered-layer.second:hover { | |
background-color: rgba(255,255,255,0.0); | |
width: 210%; | |
-webkit-transition: all color 0.3s ease-in; | |
-moz-transition: all 0.3s ease-in; | |
} | |
.hovered-layer.last:hover { | |
background-color: rgba(255,255,255,0.0); | |
width: 110%; | |
-webkit-transition: all color 0.3s ease-in; | |
-moz-transition: all 0.3s ease-in; | |
} | |
/* Universal effect for three elements */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<title>CSS hover effects</title> | |
<link rel="stylesheet" type="text/css" href="menu.css" /> | |
</head> | |
<body> | |
<nav> | |
<ul> | |
<li><div class="hovered-layer first"></div>Menu item one</li> | |
<li><div class="hovered-layer second"></div>Menu item second</li> | |
<li><div class="hovered-layer last"></div>Menu item third</li> | |
</ul> | |
</nav> | |
<!-- | |
<nav> | |
<div class="article-block"> | |
<div class="hovered-layer first"></div> | |
<h2>Article title</h2> | |
<p>Article description</p> | |
</div> | |
<div class="article-block"> | |
<div class="hovered-layer second"></div> | |
<h2>Article title</h2> | |
<p>Article description</p> | |
</div> | |
<div class="article-block"> | |
<div class="hovered-layer last"></div> | |
<h2>Article title</h2> | |
<p>Article description</p> | |
</div> | |
</nav> | |
--> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment