A client requested a “slot machine” hover effect for their social network buttons. When you hover on the icon, it moves up, sort of like in a slot machine, and changes color. Here’s an example of what I’m talking about.
The key to this effect is to use CSS transitions to animate the background-position of the background-image.
First, create a div to contain the button. Let’s call it “#button”.
Next, here is the CSS for the button in normal state, and in hover:
background-position: 0 0;
transition: background 0.2s ease-in-out;
-moz-transition: background 0.2s ease-in-out;
-webkit-transition: background 0.2s ease-in-out;
border: 1px solid blue;
background-position: 0 -48px;
border: 1px solid red;
The image that you want to animate will be displayed as the background image of the div. Be sure to have the “background-attachment:local;” there or else it won’t work properly. The “transition” CSS tells the browser to animate the background in 0.2 seconds using a particular easing curve.
In the hover state, the key is to specify a new background position for the image. Since it is repeated in the y-direction, it merely reappears in its original position when I specify -48 pixels (which is the height of the image) in the y-direction. If you want, however, you can supply a different image below the main image and it will rotate up when you hover instead.
The border and background color can be anything you want.
Hope this was helpful! – Brian