Skip to content

Instantly share code, notes, and snippets.

@scottsappen
Created September 22, 2013 23:00
Show Gist options
  • Save scottsappen/6664689 to your computer and use it in GitHub Desktop.
Save scottsappen/6664689 to your computer and use it in GitHub Desktop.
Create a nice little effect using CSS. When hovering over an element, such as an icon for instance, you can move it up the screen by a few pixels slowly while changing its color. When you're done, reset it. Nice little touch.
//when hovering, change the cover and move the element up a few pixels
color: #9ed846;
transform: translate(0,-4px);
-webkit-transform: translate(0,-4px);
-o-transform: translate(0,-4px);
-moz-transform: translate(0,-4px);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
//and when done hovering, change the cover and return it to its original position
color: #444;
transform: translate(0,0px);
-webkit-transform: translate(0,0px);
-o-transform: translate(0,0px);
-moz-transform: translate(0,0px);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment