Hover Animations

Hover animations let you animate an element in and out when the mouse enters and leaves a parent container. This is ideal for overlay icons, captions, and buttons that reveal themselves on hover over an image card. It uses the same Animate.css class vocabulary as the entrance animations.

Key Attributes

data-hover-animate: animation class to play on mouse enter (required). Example: data-hover-animate="fadeIn" or data-hover-animate="op-1".
data-hover-animate-out: animation on mouse leave. Default: fadeOut.
data-hover-speed: animation duration in ms. Default: 600. This sets the element's animation-duration.
data-hover-delay: delay in ms before the enter animation starts. Default: 0.
data-hover-parent: selector of the element that receives the hover listeners. Use self to bind to the element itself. If omitted, the plugin walks up to the closest .bg-overlay, falling back to the element.
data-hover-reset: true or false (default false). When true, the out state is reset after the speed elapses.
data-hover-mobile: true (default) allows the effect on all devices. Set to a breakpoint like lg to require device-up-lg, or false to require large screens only.

Basic Example

An overlay icon that fades from partial to full opacity on hover:

<div class="bg-overlay">
    <div class="bg-overlay-content">
        <span class="overlay-trigger-icon size-lg op-ts op-07 bg-dark text-light"
              data-hover-animate="op-1"
              data-hover-animate-out="op-07">
            <i class="bi-image"></i>
        </span>
    </div>
    <div class="bg-overlay-bg bg-transparent"></div>
</div>

Here op-07 and op-1 are Canvas opacity utility classes, and op-ts adds an opacity transition. Hover over the parent .bg-overlay and the icon animates from 70 percent to full opacity.

Explicit Parent

Bind the hover to a specific ancestor:

<div class="portfolio-item">
    <div class="portfolio-image">
        <img src="images/portfolio/1.jpg" alt="Project">
    </div>
    <div class="portfolio-overlay"
         data-hover-animate="fadeInUp"
         data-hover-animate-out="fadeOutDown"
         data-hover-parent=".portfolio-item"
         data-hover-speed="400">
        <a href="#" class="button">View</a>
    </div>
</div>

Tips

The mouse listeners attach to the parent, so wrap the animated element inside a hoverable container such as .bg-overlay or a portfolio item.
Match data-hover-animate and data-hover-animate-out pairs (for example fadeInUp and fadeOutDown) so the motion reverses cleanly.
Use data-hover-mobile="false" to disable hover effects on touch devices where hover is unreliable.

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

Stagger several elements into view by giving each a data-animate class and an increasing data-delay (in ms). Canvas plays them as the block scrolls into the viewport.

<div class="heading-block">
    <h2 data-animate="fadeInUp">Layered Heading</h2>
    <p data-animate="fadeInUp" data-delay="200">First line appears next.</p>
    <a href="#" class="button" data-animate="fadeInUp" data-delay="400">Then the button</a>
</div>

Attributes:

data-animate: the animate.css class to apply (e.g. fadeIn, fadeInUp, zoomIn).
data-delay: delay in ms before this element animates, used to layer/stagger.
data-animate-out + data-delay-out: optional exit animation and its delay.

Canvas uses an IntersectionObserver, so animations trigger once each element enters view.

Was this page helpful?