Skip to content

Instantly share code, notes, and snippets.

@chriscoyier
Created August 16, 2010 21:55
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save chriscoyier/527825 to your computer and use it in GitHub Desktop.
Save chriscoyier/527825 to your computer and use it in GitHub Desktop.
#things-i-do { width: 370px; position: absolute; right: 0; top: 0; }
.thing-i-do { text-align: center; margin: 18px; background: rgba(215, 215, 215, 0.5); border: 1px solid #ccc; height: 65px; overflow: hidden; }
.thing-i-do a { display: block; height: 130px; }
.thing-i-do h5 { border: 0; color: #333; height: 65px; line-height: 65px; opacity: 1; text-transform: inherit; letter-spacing: 0; font-style: italic; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; }
.thing-i-do a:hover h5 { margin-top: -75px; opacity: 0; }
.thing-i-do div { position: relative; background: #333; color: white; height: 65px; padding: 10px; font-size: 11px; opacity: 0.0; -webkit-transform: rotate(6deg); -webkit-transition: all 0.4s linear; -moz-transform: rotate(6deg); -moz-transition: all 0.4s linear; }
.thing-i-do a:hover div { opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); }
#thing-wufoo { background: #c73b1b url(images/css-tricks.png) 0 -1042px no-repeat; padding-left: 120px; text-align: left; }
#thing-digwp { background: #367db2 url(images/css-tricks.png) 11px -1106px no-repeat; padding-left: 90px; text-align: left; }
#thing-qod { background: #393838 url(images/css-tricks.png) 5px -1183px no-repeat; padding-left: 133px; text-align: left; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment