Animated Hover Effect with jQuery

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