Portfolio Directional Hover

The Portfolio Directional Hover widget allows you to display portfolio projects in a grid layout with interactive directional hover animations. When users move their cursor over a portfolio item, the overlay content appears based on the direction of the cursor movement, creating a visually engaging hover experience.

This widget is ideal for creative portfolios and agency websites where hover interactions help highlight project details while maintaining a clean portfolio grid layout.

Widget Controls

The widget settings are divided into several sections inside the Content tab in Elementor

1. General Section

• Extra Class: Add a custom CSS class for additional styling or advanced customization.

2. Query Section

• Post per Page: Control number of posts to display per page.
• Excerpt Length: Controls how many words are displayed in the portfolio excerpt.
• Author: Filter portfolio items by selecting specific authors.
• Categories: Select categories to include in the portfolio directional hover.
• Exclude Categories: Select categories that should not appear in the portfolio directional hover.
• Include Posts: Manually select specific portfolio posts to display.
• Exclude Posts: Remove selected posts from the directional hover.
• Order By: Sort portfolio items by ID, title, date, or other available options.
• Order: Choose ascending or descending order.

3. Layout Section

• Post Items: Drag-and-drop layout builder to enable or disable portfolio elements such as feature image, title, excerpt, read more button, categories, tags, and author.
• Post Overlay Items Options: Enable or disable elements that appear in the overlay when hovering over an portfolio item.
• Post Overlay Items: Configure which elements appear inside the overlay.
• Top Meta: Configure metadata displayed above the portfolio content such as categories, author, or date.
• Bottom Meta: Configure metadata displayed below the portfolio content.
• Post Heading Tag: Choose the HTML heading tag used for portfolio titles (H1–H6).

4. Read More Section

• Read More Text: Customize the label of the read more button.
• Icon: Add an icon to the read more button.
• Icon Position: Choose whether the icon appears before or after the text.
• Icon Spacing: Adjust the spacing between the icon and the button text.

5. Image Section

• Thumbnail: Choose the image size used for portfolio thumbnails.

6. Directional Effects

• Directional Style: Select the direction transition style.
• Slide Animation Duration (s): Duration of the slide animation when the overlay appears..
• Slide Animation Ease: Timing function that controls the acceleration and deceleration of the animation.
• Slide Distance Factor: Adjusts the intensity of the hover movement.

Styling Options​

All elements of the Portfolio Directional Hover widget can be customized using Elementor’s Style tab.

• Grid spacing and alignment
• Typography for titles, metadata, and content
• Image borders, padding, and spacing
• Overlay background and blur effects
• Button styles including colors, borders, and typography
• Category, author, and tag styling

Summary

The Portfolio Directional Hover widget provides a visually engaging way to display portfolio projects using directional hover animations and overlay effects.

• Dynamic portfolio queries
• Responsive grid layouts
• Directional hover animations
• Overlay-based portfolio content display
• Support for images and video media
• Full styling control through Elementor

This widget is ideal for modern portfolio websites where interactive hover effects enhance the browsing experience and highlight project details effectively.