Portfolio Directional Hover

Estimated reading: 4 minutes 173 views

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.

General Overview


The Portfolio Directional Hover widget provides controls to manage:
  • Portfolio query and filtering options
  • Grid layout and column configuration
  • Drag-and-drop portfolio content elements
  • Directional hover animation styles
  • Read more button customization
  • Overlay content positioning
  • Image and video media support

Widget Controls


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

1. General Section

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

2. Query Section

null
  • 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 grid.
  • Exclude Categories: Select categories that should not appear in the portfolio grid.
  • Include Posts: Manually select specific portfolio posts to display.
  • Exclude Posts: Remove selected posts from the grid.
  • Order By: Sort portfolio items by ID, title, date, or other available options.
  • Order: Choose ascending or descending order.

3. Layout Section

null
  • 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 accordion 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

null
  • Read More Text: Customize the label for 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

null
  • Thumbnail: Choose the image size used for portfolio thumbnails.
  • Image Behavior: Control how the portfolio image behaves when hovered.
  • Overlay Options: Configure overlay effects and hover behavior for portfolio images.

6. Direction Effects Section

null
  • Direction Style: Select the animation style used when hovering over portfolio items.
  • Slide Animation Duration: Control the duration of the slide animation (for slide style).
  • Slide Animation Ease: Choose the easing function used for slide animations.
  • Slide Distance Factor: Adjust the distance multiplier used for slide animation movement.
  • Flip Animation Duration: Set the animation duration for the 3D flip effect.
  • Flip Animation Ease: Choose the easing function used for flip animations.
  • Flip Rotation Angle: Define the rotation angle used in the flip animation.
  • Flip Translate Distance: Control the translation distance applied during the flip animation.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share this Doc

Portfolio Directional Hover

Or copy link

CONTENTS

Powered By EazyDocs