October 13, 2023

Set Up Hover Tabs with Image Content in Elementor

Play Video

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:

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.


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.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Set Up Hover Tabs with Image Content in Elementor
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.