Bump Up CSS Effect

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.

HTML

<div class="example-1">
    <img src="http://media-cache-ak0.pinimg.com/originals/d1/72/f8/d172f85fcef75dfca366b246669d258d.jpg" style="width:200px; height:auto;" />
    <img src="http://media-cache-ak0.pinimg.com/originals/d1/72/f8/d172f85fcef75dfca366b246669d258d.jpg" style="width:200px; height:auto;" />
        <img src="http://media-cache-ak0.pinimg.com/originals/d1/72/f8/d172f85fcef75dfca366b246669d258d.jpg" style="width:200px; height:auto;" />
            <img src="http://media-cache-ak0.pinimg.com/originals/d1/72/f8/d172f85fcef75dfca366b246669d258d.jpg" style="width:200px; height:auto;" />
                <img src="http://media-cache-ak0.pinimg.com/originals/d1/72/f8/d172f85fcef75dfca366b246669d258d.jpg" style="width:200px; height:auto;" />
                    <img src="http://media-cache-ak0.pinimg.com/originals/d1/72/f8/d172f85fcef75dfca366b246669d258d.jpg" style="width:200px; height:auto;" />
</div>

CSS

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