Bring Your Boring Site to Life

Hover effects can make your site feel much more dynamic and alive. It used to be the case that JavaScript was required to do anything really interesting with a hover effect but these days CSS3 is capable of doing a ton of really cool stuff if you’re creating enough.

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.

Bump Up


Live Demo: Click Here to Launch

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.

Bump Up CSS

.ex1 img{
    border: 5px solid #ccc;
    float: left;
    margin: 15px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
.ex1 img:hover {
    margin-top: 2px;