Animated Div Overlay on Direction aware hover, with jQuery & CSS3

Question

Just trying to develop a portfolio page similar to http://www.lippincott.com/work/ .

But, how to implement this Overlay Effect (please see the portfolio items in above URL) which is displayed / animated overlay according to the direction of mouse on hovering an element, say DIV.

Answer 1

There's no need for a plug-in! Here's a jsfiddle that redoes the same effect.

<div id="BigDiv">

    <div class="MyWrapper">
        <div class="MyContent">5</div>
        <div class="MyOverlay"></div>
    </div>

    <div class="MyWrapper">
        <div class="MyContent">5</div>
        <div class="MyOverlay"></div>
    </div>

    <div class="MyWrapper">
        <div class="MyContent">5</div>
        <div class="MyOverlay"></div>
    </div>

</div>​

Here's the CSS:

.MyWrapper{
    margin:3px 3px;
    float:left;
    width:50px;
    height:50px;
    border:2px solid green;}

.MyContent{
    width:50px;
    height:50px;
    position:relative;}

.MyOverlay{
    opacity:0;   
    width:0px;
    height:50px;
    position:relative;
    top:-50px;
    left:0px;
    background:blue;}

Here's the javascript:

    $(document).ready(function () {
        PageHandler();
    });

    function PageHandler() {

    $('#BigDiv').on({

        mouseenter: function() {
            $(this).parent().find('.MyOverlay').css({
                opacity: '0.5',
                width: '0px'
            }).stop().animate({
                width: '50px'
            }, 500);
        },
    }, '.MyContent');

    $('#BigDiv').on({

        mouseleave: function() {
            $(this).parent().find('.MyOverlay').each(function() {
                $(this).stop().animate({
                    opacity: '0'
                }, 300, function() {
                    $(this).css('width', '0px');
                });} 
            )}
    }, '.MyWrapper');
}

I left the opacity at 0.5 instead of 0.95 so that you can see the 5 underneath better; it'll look better when you'll put a picture instead. You can also ply with the durations of the animations. But overall, it's the same effect; you just need to make it work with your design. No plugin , just jquery.

Answer 2

There's an article published on tympanus.net that describes how this works: http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/

It's a simple plugin you can use, all you have to do is set up your css properly. It basically checks your mouse offset from when you enter and leave the hovered element, based on that it will decide from what side to animate the hover in.