fp up icon

Create a “Slot Machine” Hover Effect with CSS

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.

It turns out that this effect can be accomplished with some clever CSS!  No JavaScript required!

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:

#button {
background-image: url('icon-fb-hover.png');
background-position: 0 0;
background-repeat: repeat-y;
height: 48px;
width: 46px;
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;

#button:hover {
background-position: 0 -48px;
border: 1px solid red;
background-color: pink;
cursor: pointer;

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

2 thoughts on “Create a “Slot Machine” Hover Effect with CSS

  1. Hey i have been playing around the with the css. it works. but my problem is, i want to apply the same effect into the main menu button (top menu)

    heres a reference website that you can refer to


    hope you can assist me in this matter, is it possible to achieve it using ONLY CSS?


    1. HI Steve,

      You would have to change your main logo to be a background image in order to use the CSS that I have here. I suggest using a transparent PNG file for the image as a placeholder to accomplish this.


Leave a Comment or Ask a Question

This site uses Akismet to reduce spam. Learn how your comment data is processed.