Bump Up - Effect

Description:

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.

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; }

HTML:

<div class="ex1">

<img src="">

<img src="">

<img src="">

<img src="">

</div>