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.

How To Do It

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-attachment:local;
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

Featured Image Photo by Hello I’m Nik 🎞 on Unsplash

Brian Shim

I am a freelance web developer and consultant based in Santa Monica, CA who uses WordPress, PHP, and JavaScript to create websites and web applications for businesses, nonprofits, and organizations.

brianshim.com