Direction-aware Hover Effect with jQuery SlipHover Plugin

SlipHover is a jQuery plugin used to add direction-aware overlay effects on any Html elements (images, DIVs, etc) when hover over. When you “leave” the element, the overlay will slide out to that direction, following your mouse. This will help you create animated image caption hover effects.

See also:

• Animated jQuery Image Caption Overlay Effects Plugin - HCaptions
• Image Direction-Aware Hover Effect with jQuery and CSS3
• Amazing Thumbnail Zoom Plugin With Sliding Captions
• Animated jQuery Image Caption On Hover Plugin - Capty
• jQuery Animated Image Cation with HTML5 Figcaption

How to use it:

1. Wrap a group of images in a container. SlipHover plugin will use image's title attribute as the image caption.

<div id="container">
<ul>
<li> <a href="#"> <img src="images/1.jpg" alt="Sports" title="Sports Image"> </a> </li>
<li> <a href="#"> <img src="images/2.jpg" alt="technics" title="Technics Image"> </a> </li>
<li> <a href="#"> <img src="images/3.jpg" alt="animals" title="Animals Image"> </a> </li>
<li> <a href="#"> <img src="images/4.jpg" alt="fashion" title="Fashion Image"> </a> </li>
<li> <a href="#"> <img src="images/5.jpg" alt="nightlife" title="Nightlife Image"> </a> </li>
<li> <a href="#"> <img src="images/6.jpg" alt="nature" title="Nature Image"> </a> </li>
</ul>
</div>

2. Import jQuery javascript library and jQuery SlipHover plugin at the end of your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.sliphover.min.js"></script>

3. Call the plugin on the container and you're done.

<script type="text/javascript">
$(document).ready(function(){
$('#container').sliphover();
})
</script>

4. All the default settings.

<script type="text/javascript">
$(document).ready(function(){
$('#container').sliphover({
target:'img', // specify witch html tag the animation will apply on
title:'title', // specify what information will be display when hover, the title or the alt of the image
duration:'fast', //specify how long the animation will lasts in milliseconds
fontColor:'#ffffff',
backgroundColor:'rgba(0,0,0,.5)', // specify the background color and opacity using rgba
reverse:false,
delay:0,
autoScroll:true, // if true, the overflowed long text of the overlay will auto scrolling up and down when hover
scrollSpeed:40, // if autoScroll is true, this option specify the scroll speed, the smaller the fast
height:'100%'//specify the height of the overlay
});
})
</script>

Change log:

1.1.2 (2014-03-03)

• optimize

1.1.1 (2014-02-12)

• Fixed: Applying in ul li only first li has hover effect.
• Demo update.

---

This awesome jQuery plugin is developed by wayou. For more Advanced Usages, please check the demo page or visit the official website.