Need a cool hover effect for something on your site? Look no further! We’ve created several custom examples that you can view live for inspiration.
If you like the effect, steal it! We’ve got the CSS ready and waiting for you to copy.
Bring Your Boring Site to Life
The effects we’ll be using today all use code that is supported by modern browsers, meaning of course Mozilla and Webkit for the most part. IE support is spotty at best across various versions so be sure to test thoroughly in your own implementation. Fancy hover effects are one of those things that you can usually degrade fairly gracefully so that older browsers still see some change.
This works best when you have a series of horizontal items. That way when you run your mouse across them you get a nice wave effect.
This one is super easy to implement and there are in fact several ways to go about it. What I did below is just apply a margin to each image and then reduced that margin on hover. The margin starts at 15px, then reduces to only 2px on hover, which makes the image jump up. You could easily use this same effect on text items if they were in a list.
The transition here is completely optional as the effect still works quite well without it. Just to make it a little smoother though I threw in a quick animation set to ease-out, which I thought provided the best effect for this particular subject.
For this one I wanted a sort of lava lamp effect so that as you move your mouse down the list, each image slowly expands and then goes back to its original size.
To accomplish this, I inserted a stack of images that were 400px wide by 133px tall. I then sized those images at 300px by 100px in the CSS and expanded on hover. Since I had a center alignment, the new size of the image threw off my alignment, a negative margin set to half the size of the growth in the width addressed this problem.
To make the text appear on hover, I simply changed the color and line-height. When you hover over the image, the text zooms into view! It’s a pretty neat trick considering it’s all CSS.
Fade Text In CSS
font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
This one is super simple but it’s a great effect for a thumbnail gallery. The basic premise is that you create a grid of images and then set the images to rotate when you hover over them, creating the illusion of a crooked photo hanging on a wall.
We’ll use lots of newer, browser-specific CSS on this one so you might want to add in something for older browsers as well. Our gallery will use box-shadows (optional), transitions and transforms to pull off the effect we want. The transform will handle the rotation and the transition will make it nice and smooth.
To take this one even further, you could use pseudo-selectors to make the images lean in different directions.
This one is pretty complicated so I had to wrestle with it quite a bit before I came up with an effect that I liked. The default state of the image is at a slightly reduced opacity. Then, when you hover over it, the opacity cranks to full, a glow appears around the edges and a reflection (Webkit only) pops up.
Unfortunately, the reflection isn’t something that responds to a transition, so it sort of just pops in right away while the rest fades in, but it’s still a pretty nice overall transition.
If you’re confused about how CSS reflections work, you can read all about them in a great article from David Walsh.
These five examples should be enough to inspire you to create your own awesome CSS hover effects. Remember to experiment with these, combine them and add in your own flair to make them more interesting.
If you’ve spotted any cool hover effects around the web, we want to see them! Leave a comment below and link to a page with an example.