Set Up Hover Tabs with Image Content in Elementor

Hover Tabs with Image Content is a fantastic way to make your website more interactive and user-friendly. In this tutorial, we’ll walk you through how to create hover tabs with image content using Elementor Pro. We’ll also add a bit of code to make the tabs change on hover, enhancing the user experience.

Prerequisites

Please make sure you have the following installed and activated:

• Elementor (Pro)

Setting Up the Container

1. Open Elementor and navigate to the page where you want to add the hover tabs.
2. Drag and drop a container and set its width to 1000 pixels.

Adding, Configuring, and Styling the Tabs Widget

1. Search for the Tabs widget in the Elementor sidebar.
2. Drag and drop the Tabs widget into the section you just created.
3. Go to the Tabs widget settings.
4. Set the width of the tab titles to 250 pixels (content will be 750 pixels).
5. Align the tab titles to the left.
6. Navigate to the Style tab.
7. Set the active tab title color to orange and the inactive tab title color to black.

Adding Content to Tabs

1. Delete the default Tab 2 and Tab 3 (we will duplicate the existing one later on).
2. Add an image widget inside Tab 1.
3. Upload your desired image (preferably in webp format for speed optimization).

Adding Icons to Tab Titles

1. Go to the tab title settings.
2. Enable the icon option and upload an SVG icon.
3. Adjust the icon size and spacing as needed.
4. Duplicate your tab and change the titles and icons to your liking.

Making Tabs Change on Hover

1. Copy the hover code from Elementor How.
2. Navigate to the Tabs widget settings and add an HTML widget above it.
3. Paste the hover code into the HTML widget.
4. Add a custom CSS class named “hover-tabs” to the Tabs widget (under Advanced > CSS Classes).
5. Preview your page to see the hover tabs in action.

Conclusion

Creating hover tabs with image content in Elementor is a straightforward process that can significantly improve the user experience on your website. By following these steps, you’ll have a set of interactive hover tabs ready to engage your visitors.