Direction aware Hover

i love you: http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/

by Annett

HTML

<script src="https://raw.github.com/gist/4c73be12e29a8e1a9331/e2e415132bd0601cbbba1c299ebcb812740eacd7/jquery.hoverdir.js"></script>
<ul id="da-thumbs" class="da-thumbs">
    <li>
        <a href="#">
            <img src="http://lorempixel.com/300/200/nature/">
            <div><span>Hier steht die Beschreibung des Teils.</span></div>
        </a>
    </li>
    
    <li>
        <a href="#">
            <img src="http://lorempixel.com/300/200/nature/">
            <div><span>Cras mattis consectetur purus sit amet.</span></div>
        </a>
    </li>
    
    <li>
        <a href="#">
            <img src="http://lorempixel.com/300/200/nature/">
            <div><span>Bla bla sülz laber talk</span></div>
        </a>
    </li>
    
    <li>
        <a href="#">
            <img src="http://lorempixel.com/300/200/nature/">
            <div><span>Und noch eine Beschreibung.</span></div>
        </a>
    </li>
    
     <li>
        <a href="#">
            <img src="http://lorempixel.com/300/200/nature/">
            <div><span>Bla bla sülz laber talk</span></div>
        </a>
    </li>
    
    <li>
        <a href="#">
            <img src="http://lorempixel.com/300/200/nature/">
            <div><span>Und noch eine Beschreibung.</span></div>
        </a>
    </li>
       
    
</ul>

CSS

body { 
    padding: 30px;
    font-family: Helvetica;
}

.da-thumbs li {
    float: left;
    margin: 5px;
    background: #fff;
    padding: 8px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.da-thumbs li a,
.da-thumbs li a img {
    display: block;
    position: relative;
}

.da-thumbs li a {
    overflow: hidden;
}

.da-thumbs li a div {
    position: absolute;
    background: rgba(75,75,75,0.7);
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 35px;
    text-align: center;
}


/* ANIMATION */

.da-thumbs li a div.da-animate {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
/* Initial state classes: */
.da-slideFromTop {
    left: 0px;
    top: -100%;
}
.da-slideFromBottom {
    left: 0px;
    top: 100%;
}
.da-slideFromLeft {
    top: 0px;
    left: -100%;
}
.da-slideFromRight {
    top: 0px;
    left: 100%;
}
/* Final state classes: */
.da-slideTop {
    top: 0px;
}
.da-slideLeft {
    left: 0px;
}

JavaScript

$(function() {
   $('#da-thumbs > li').hoverdir();
});