public
Created — forked from jonraasch/animated-icon.html

animated icon on hover

  • Download Gist
animated-icon.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
<!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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.