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

Setting Description
data-hover-animate

Animation to run on Mouseover

Option(s): Any CSS3 Animation Class can be used. Recommended to use entry style animations

Ex: data-hover-animate="fadeIn"

data-hover-animate-out

Animation to run on Mouseout

Option(s): Any CSS3 Animation Class can be used. Recommended to use exit style animations

Ex: data-hover-animate-out="fadeOut"

data-hover-speed

Speed of the Animation in milliseconds

Ex: data-hover-speed="600"

data-hover-delay

Delay in milliseconds to Start the Animation

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

Ex: data-hover-parent=".feature-box"

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