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.
Please make sure you have the following installed and activated:
- Elementor (Pro)
Setting Up the Container
- Open Elementor and navigate to the page where you want to add the hover tabs.
- Drag and drop a container and set its width to 1000 pixels.
Adding, Configuring, and Styling the Tabs Widget
- Search for the Tabs widget in the Elementor sidebar.
- Drag and drop the Tabs widget into the section you just created.
- Go to the Tabs widget settings.
- Set the width of the tab titles to 250 pixels (content will be 750 pixels).
- Align the tab titles to the left.
- Navigate to the Style tab.
- Set the active tab title color to orange and the inactive tab title color to black.
Adding Content to Tabs
- Delete the default Tab 2 and Tab 3 (we will duplicate the existing one later on).
- Add an image widget inside Tab 1.
- Upload your desired image (preferably in webp format for speed optimization).
Adding Icons to Tab Titles
- Go to the tab title settings.
- Enable the icon option and upload an SVG icon.
- Adjust the icon size and spacing as needed.
- Duplicate your tab and change the titles and icons to your liking.
Making Tabs Change on Hover
- Copy the hover code from Elementor How.
- Navigate to the Tabs widget settings and add an HTML widget above it.
- Paste the hover code into the HTML widget.
- Add a custom CSS class named “hover-tabs” to the Tabs widget (under
Advanced > CSS Classes).
- Preview your page to see the hover tabs in action.
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.