jQuery Plugin For Image Hover Transition Effect - hoverTransition

File Size: 6.96KB
Views Total: 2315
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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> 


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);

5. Enable the plugin with options.

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

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