Hover Dir Effect (Hover Direction Effect) adds a directional hover animation that reacts to the direction of mouse entry and exit. Overlay content animates in and out from the corresponding direction (top, bottom, left, or right), creating a more dynamic and engaging hover experience.
Supported Elements
Hover Dir Effect is available only in the following Porto elements:
- Featured Image element - available in Porto Post Type Builder
- Image Gallery element - available as a normal Porto widget for pages and Porto Blocks
Where Hover Dir Effect Is Used
Featured Image Element
- Used inside Porto Post Type Builder
- Applies to Posts, Products, Portfolios, Custom post types
- Adds directional hover animation to the main featured image of each item
Image Gallery Element
- Used in Normal pages and Porto Blocks
- Applies Hover Dir Effect to gallery images
How Hover Dir Effect Works
- Animation direction is calculated from the cursor position
- Overlay content enters from Top, Bottom, Left, Right
- On mouse leave, the animation exits in the same direction
- Creates a natural interaction aligned with user movement
How to Enable Hover Dir Effect
Featured Image (Post Type Builder)
- Go to Porto > Template Builder > Post Type Builder
- Edit or create a post layout
- Add the Featured Image element
- Enable Hover Dir Effect in the element settings
- Configure overlay content and styles
- Save the layout
Image Gallery
- Edit a page or Porto Block with Elementor or WPBakery
- Add the Image Gallery element
- Set Hover Effect as Hover Dir Effect in the element options
- Adjust overlay content and design
- Save and update
Typical Use Cases
- Featured images in post or product layouts with interactive hover
- Image galleries with direction-based overlay animations
- Portfolio or media-focused layouts
- Grid-based image presentations
