Sneak Peek

Before we get started, take a look at the demo below to see all of the various hover effects that we’ll be building.

Demo: Click here to launch.

screenshot

Setup

Before we begin creating the individual demos, some basic setup is required. Here’s a chunk of CSS that we’ll be using to dictate the basic appearance of all of the examples.

Most of this is basic stuff: box-sizing allows us to manipulate the box model (feel free to apply more specifically if you don’t like the universal selector), and the pic class gives us a place to toss in some generic styling for each photo.

Zoom and Pan

Our first group of effects involves utilizing some tricks with hidden overflow. By clipping the image to the bounds of a div, we can pull off some pretty cool hovers.

Here’s a demo of the four hover effects in action:
Demo: Click here to launch.

screenshot

Grow

screenshot

To begin, we’ll make it so that when the user hovers over the image, the photo enlarges while still staying within its bounds, resulting in a zooming in effect. Here’s the HTML.

HTML

As you can see, we’re using the “pic” class from before along with a “grow” class. As usual, our images are being served up courtesy of Lorem Pixel. Note that the image we’re using here is 400px by 400px. Now let’s see the CSS.

CSS

What we’ve done here is specifically targeted the image tag, set its height to 300px square and then increased this to 400px square when the user hovers. Again, since we have overflow set to hidden, this will result in a zoom effect.

Shrink

screenshot

We’ve seen how to grow an image on hover, so let’s reverse that effect and zoom the photo out. The method is pretty much exactly the same, only this time you’ll start with the size at 400px and shrink it to 300px on hover.

HTML

CSS

Side Pan

screenshot

The next effect keeps the image the same size throughout, but pans it sideways as the user hovers. As you can see in our kicking example, this is a great way to convey a sense of action.

HTML

Here we are using an image that’s 600px wide, but only 300px tall. Because we’re zooming sideways, we don’t need any extra height to pull off the effect.

CSS

For the pan, we’re not changing the image size like we did last time, but instead using margin to pull the image left on hover. If you want it to move right, use a positive value or margin-right.

Vertical Pan

screenshot

A vertical pan can be cool as well. Once again, I’ll be using this effect to convey a sense of motion, but this is also great for communicating height if you want to pan up something like a tall building. The cliff in our photo helps push this concept.

HTML

Last time we used an image that was 600px by 300px, this time we’ll flip that around and go with a photo that is 300px by 600px.

CSS

Same drill as last time, only we’re using margin-top instead of margin-left. This will cause the top of the image to be in view by default and the bottom of the image to come into view on hover.

Fun with Transforms

Our next section of effects is a little more crazy. We’ll start with a simple tilt but then jump into some really unique and interesting hovers.

Here’s a demo of the three effects in action:
Demo: Click here to launch.

screenshot

Tilt

screenshot

This one is super simple, all we’re going to do is rotate the image slightly when the user hovers over it. The result is a basic but fun illusion of a crooked hanging picture.

HTML

CSS

As you can see, all we had to do was rotate the image ten degrees. Easy and effective! Notice that this time around, we’re targeting the class itself, not the image.

Morph

screenshot

This is where the crazy comes in. The image above doesn’t really do this one justice so be sure to check out the demo. What’s happening is that, when the user hovers, the image begins to spin. As it spins, it morphs from a square into a circle. The result is super fun to play with.

HTML

CSS

What I’ve done here is set the morph class to spin 360 degrees on hover. As it’s spinning, the border-radius will gradually climb its way to 50%, resulting in a circle.

Focus

screenshot

Here’s another weird one that uses border-radius to round off the image. This time though, we’ll not only increase the border’s radius but also its thickness. Combined with the border-box, this will create an effect that focuses in on on particular part of an image.

HTML

CSS

What I did here was take our 10px white border and turned it into a 70px black border while cranking the radius up to 50% like we did in the last example.

Webkit Filters

This last set of effects is purely experimental. Unlike the examples above, all of which use multiple prefixes to ensure maximum browser compatibility, these only use the -webkit prefix because there’s no other support at the moment. If you’re not using Safari or Chrome, these aren’t going to work for you.

Despite the unfortunate constraints, Webkit filters let you perform some pretty awesome effects! Here’s a demo of three of my favorites:

Demo: Click here to launch.

screenshot

Blur

screenshot

The first effect that we’re going for is a simple blur. Long has man sought to blur pixels with CSS alone and now it’s finally possible with one little line of code!

HTML

CSS

AS you can see, we use the -webkit-filter property, then set the blur to 5px. That’s all there is to it.

B&W

screenshot

This time we’re going to drop all of the saturation out of the image on hover. It used to take two images to pull off this effect but with Webkit filters, we can cut this down to one.

HTML

CSS

Here I set the grayscale value to 100%. If you only want to drop some of the saturation out, try bringing down this number.

Brighten

screenshot

For our final trick, we’re going to darken a photo by default, then brighten it up to its normal state on hover. This creates a sort of reveal effect.

Here, 0% is regular brightness. Anything above that and you brighten the image, anything below and you darken it. We started at -65% and brought it up to 0% on hover.

Steal Them!

The examples above are all meant for you to steal and use as you will in your own work, so be sure to bookmark this page and come back to it the next time you’re looking for an interesting CSS hover effect.

For more related resources: