Skip to content

Instantly share code, notes, and snippets.

@jonraasch

jonraasch/animated-icon.html

Created May 5, 2011 15:15
Show Gist options
  • Save jonraasch/957236 to your computer and use it in GitHub Desktop.
Save jonraasch/957236 to your computer and use it in GitHub Desktop.
Download ZIP
animated icon on hover
Raw
animated-icon.html
<!doctype html>
<html lang="en">
<head>
<title>Animated Icons (example)</title>
<style type="text/css">
body {
font-family: Arial, Sans-serif, sans;
text-align: left;
background-color: #D9D3C7;
}
a {
text-decoration: none;
}
.hover-panel {
background-color: #E6E2DF;
background-image: url(http://i.imgur.com/CQhLN.png);
background-position: 292px 10px;
background-repeat: no-repeat;
color: #B2AAA4;
float: left;
height: 130px;
width: 262px;
margin: 0 10px 10px 0;
padding: 15px;
-moz-transition: all 0.2s ease; /* FF3.7+ */
-o-transition: all 0.2s ease; /* Opera 10.5 */
-webkit-transition: all 0.2s ease; /* Saf3.2+, Chrome */
transition: all 0.2s ease;
}
.hover-panel h3 {
font-family: tandelle-1, tandelle-2, Impact, Sans-serif, sans;
font-size: 38px;
line-height: 1;
margin: 0 0 10px;
text-transform: uppercase;
}
.hover-panel p {
font-size: 12px;
width: 65%;
}
.hover-panel:hover {
background-color: #237ABE;
background-position: 180px 10px;
}
.hover-panel:hover h3 {
color: #FFF;
text-shadow: rgba(0, 0, 0, 0.398438) 0px 0px 4px;
}
.hover-panel:hover p {
color: #FFF:
}
</style>
</head>
<body>
<a href="#" class="hover-panel">
<h3>Panel Title</h3>
<p>Additional information about the panel goes in a paragraph here</p>
</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment