jQuery Plugin For Image Hover Transition Effect - hoverTransition

hoverTransition is a light & easy jQuery plugin to create an animated image caption overlay that slides from any side of the image, depending on the direction of your mouse movement.

Basic usage:

1. Import the modernizr.js to check if the browser supports CSS3 transition.

<script src="modernizr.custom.92416.js"></script>

2. Import the jQuery javascript library and jQuery hoverTransiton plugin in the page.

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

3. Wrap an image in a wrap and create the html for the image caption.

<div id="wrapper"> 
<a href="#" title="hello world"> 

<img src="http://lorempixel.com/400/200">

<div class="slide-item"> 
<span class="title"> jQuery </span> 
<span class="author"> jQuery Plugins </span> 
</div>

</a> 
</div>

4. The sample CSS to style the image and the image caption overlay.

<style type="text/css">
#wrapper {
position: relative;
width: 400px;
padding: 5px;
background: #F8F3F3;
-webkit-border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
#wrapper a {
display: block;
position: relative;
overflow: hidden;
}
#wrapper a img {
display: block;
position: relative;
}
.slide-item {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255,111,162,0.9);
}
</style>

5. Enable the plugin with options.

<script>
$(function() {
var options = {
speedTime: 200,
easing: 'ease',
hoverDelay: 0
};
$(' #wrapper > a').hoverTransitionBegin(options,'div');
});
</script>

---

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