Submit your widget

Create Attractive Animated Hover Effects Easily Magic

Created 3 years ago   Views 16249   downloads 4468    Author queness
Create Attractive Animated Hover Effects Easily Magic
View DemoDownload 177.6 KB
35
Share |

With the availability of open source projects, creating cool and subtle animation can be really fast and simple. By making use off-the-shelves library what we need to do is to create a structure and apply classes to it to animate them!

Here is the screenshot, and make sure you check out the demo to see its coolness!

HTML

We will make 3 layers wrapped inside a container called .box.

  • Layer 1: .link Top layer, URL link, click to open in new window.
  • Layer 2: .box-overlay Middle layer, this would be the image. Once mouse over, this image will be moved away to reveal content underneath it.
  • Layer 3: .box-content Bottom layer, we insert content here. Once mouse over, this content will be revealed.

The following is the HTML structure. We added .magictime, data-hover and data-return in .box-overlay class. We need this to animate it. You can change type of animation you want by changing its hover and return data value. For a list of animation, 

<div class="box">
	<div class="box-content">
		<div class="box-wrapper">
			<!-- content put here -->		
		</div>
	</div>
	<div class="box-overlay magictime" data-hover="puffOut" data-return="puffIn">
		<!-- image put here -->
	</div>
	<a class="link" href="#" target="_blank"></a>						
</div>

CSS

CSS is pretty straight forward too. We added z-index for .box-overlay, .link and .box-content to make sure it's in the right order.

box {
	width:260px;
	height:195px;
	margin:20px;
	float:left;
	position: relative;
}

.box-content {
	display:block;
	padding:20px;
	width: 100%;
	height: 100%;
	background: #333;
	color:#ffffff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
}

.box-overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	z-index:10;
}

a.link {
	display:block;
	width: 100%;
	height: 100%;		
	position: absolute;
	top:0;
	left:0;
	z-index:15;		
}	

jQuery / Javascript

Last but not least, we use jQuery to add and remove classes. Remember we specified the type of animation we want in .box-overlay's data-hover and data-return? This script will get its value and add the corresponding classes to complete the hover effect with the right CSS3 animation defined in Magic Animation library.

$(function () {
	$('.box').hover(
		function () {
			var overlay = $(this).find('.box-overlay');
			overlay.removeClass(overlay.data('return')).addClass(overlay.data('hover'));
		},
		function () {
			var overlay = $(this).find('.box-overlay');		
			overlay.removeClass(overlay.data('hover')).addClass(overlay.data('return'));

		}
	);
});	

Read more:http://www.queness.com/post/16566/create-attractive-animated-hover-effects-easily