Hover Animations

Now, Canvas includes the ability to Animate Elements on Mouseover with greater flexibility. The Hover Functionality is based on JS but the animations run on CSS for better performance. So any CSS3 Animations can be used from any CSS3 Animation Library.

Usage

<div class="feature-box fbox-center">
	<div class="fbox-icon" data-hover-animate="fadeIn" data-hover-parent=".feature-box">
		<a href="#"><i class="icon-thumbs-up"></i></a>
	</div>
	<div class="fbox-content">
		<h3>Awesome Mega menu</h3>
		<p>Completely Customizable 2 Columns, 3 Columns, 4 Columns & 5 Columns Mega Menus are available.</p>
	</div>
</div>

Settings

Setting	Description
`data-hover-animate`	Animation to run on Mouseover Example: `fadeIn`
`data-hover-animate-out`	Animation to run on Mouseout Example: `fadeOut`
`data-hover-speed`	Speed of the Animation in milliseconds Example: `600`
`data-hover-delay`	Delay in milliseconds to Start the Animation This is applied only to the Entry Animation: `data-hover-animation`
`data-hover-parent`	CSS Selector of the Parent of the Element on which the Mouseover is applied to Start the Animation on the Element. This option will choose the nearest selector parent. This is especially useful when you want to Animate a Child Element while Hovering over the Parent Element Example: `.feature-box`

Extras

<article class="portfolio-item">
	<div class="portfolio-image">
		<a href="portfolio-single.html">
			<img src="images/portfolio/2/2.jpg" alt="Locked Steel Gate">
		</a>
		<div class="bg-overlay">
			<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
				<a href="images/portfolio/full/2.jpg" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-lightbox="image" title="Image" data-hover-delay="350"><i class="icon-line-plus"></i></a>
				<a href="portfolio-single.html" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-hover-delay="550"><i class="icon-line-ellipsis"></i></a>
				<a href="portfolio-single.html" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-hover-delay="750"><i class="icon-line-search"></i></a>
			</div>
			<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
		</div>
	</div>
</article>