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.

Code Example

<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

Private Content

You must be logged in with your Envato Account for Free in order to view this Content.

Login with Envato

Layered Animations using Delays

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

Last Modified: August 20, 2020

Need Help?