jQuery and CSS3 image direction-aware hover effect

A nice jQuery and CSS3 image direction-aware hover effect. The idea is to slide in an overlay from the direction we are moving with the mouse.

Image direction-aware hover effect

There is tutorial about creating hover effect with jQuery and CSS, for sliding in an overlay from the direction we are moving with the mouse.

Nice effects available to choose.

Image direction-aware hover plugin in action
Image direction-aware hover plugin in action

How to use

$('#da-thumbs > li').hoverdir();
// or with options
$('#da-thumbs > li').hoverdir({hoverDelay: 75, hoverElem: '.elem'});

Default options:

defaults: {
    speed: 300, // Times in ms
    easing: 'ease',
    hoverDelay: 0, // Times in ms
    inverse: false,
    hoverElem: 'div'
}

Methods

– show – show the hover element, after show method is triggered, hover don’t show or hide on mouseenter and mouseleave:

$('#da-thumbs > li').hoverdir('show');
// or with a specific direction
$('#da-thumbs > li').hoverdir('show','bottom');

– hide – hide the hover element and bind mouseenter and mouseleave.

$('#da-thumbs > li').hoverdir('hide');
// or with a specific direction
$('#da-thumbs > li').hoverdir('hide','top');

– setOptions – allows you to change the options while the plugin is already running

$('#da-thumbs > li').hoverdir('setOptions', options);

– destroy – unbind the plugin

$('#da-thumbs > li').hoverdir('destroy');

– rebuild – bind the plugin

$('#da-thumbs > li').hoverdir('rebuild');
// or with options
$('#da-thumbs > li').hoverdir('rebuild', options);

License: MIT

Demo:

http://tympanus.net/TipsTricks/DirectionAwareHoverEffect

Tutorial:

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

Get image direction-aware plugin from GitHub:

https://github.com/codrops/DirectionAwareHoverEffect

You may also like:

Slide in CSS image captions

Enjoy!

Share:Share on Facebook1Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1