Animated Hover Effect with jQuery

Animated Hover Effect with jQuery that can Animate an image while hovering it and show the visitors information while doing that.

How to use it:

1. Include jQuery Library

<script type="text/javascript" src="./Animated-Hover-Effect-with-jQuery_files/jquery-1.2.6.min.js"></script>

2. Call the plugin

<script type="text/javascript">
		$(function() {
			$('ul.hover_block li').hover(function(){
				$(this).find('img').animate({top:'182px'},{queue:false,duration:500});
			}, function(){
				$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
			});
			$('ul.hover_block2 li').hover(function(){
				$(this).find('img').animate({left:'300px'},{queue:false,duration:500});
			}, function(){
				$(this).find('img').animate({left:'0px'},{queue:false,duration:500});
			});
		});
</script>

3. CSS

body {
background: #666;
}
ul.hover_block {
display: block;
overflow: hidden;
height: 1%;
padding-bottom: 15px;
}
ul.hover_block li, ul.hover_block2 li {
list-style: none;
float: left;
background: #fff;
padding: 10px;
width: 300px;
position: relative;
margin-right: 20px;
}
ul.hover_block li a, ul.hover_block2 li a {
display: block;
position: relative;
overflow: hidden;
height: 150px;
width: 268px;
padding: 16px;
color: #000;
font: 1.6em/1.3 Helvetica, Arial, sans-serif;
}
ul.hover_block li a, ul.hover_block2 li a {
text-decoration: none;
}
ul.hover_block li img, ul.hover_block2 li img {
position: absolute;
top: 0;
left: 0;
border: 0;
}

4. Html

<ul class="hover_block">
<li><a href="http://www.jQueryScript.Net"><img src="./Animated-Hover-Effect-with-jQuery_files/incg_hover.gif" alt="Timothy van Sas" style="top: 0px;"> Hi there, i’m text. Kisses from Timothy van Sas. www.jQueryScript.Net</a></li>
<li><a href="http://www.jQueryScript.Net"><img src="./Animated-Hover-Effect-with-jQuery_files/incg_hover2.gif" alt="Timothy van Sas" style="top: 0px;"> Hi there, i’m another text. Kisses from Timothy van Sas. www.jQueryScript.Net</a></li>
</ul>

---

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