Tabs - Image on hover

[Ozzy]

Hi,

Is there a way to replace the background color of a tab (only on hover) by a background image (for each tab)?

Something like this

[rad]

Hi @breix,

Thanks for reaching out.

That’s possible with custom CSS, I can’t provide the full customization but I’ll provide the idea of how it can be done. First, inspect your tab element and click customize.

Then click edit CSS

$el .x-tabs-list > ul > li:nth-child(1) button:hover{
  background: url(http://example.com/button-1-background.jpg);
  background-size: cover;
}

The li:nth-child(1) means first item, repeat CSS for each tab, like li:nth-child(2) with their correspoding background image URL.

Thanks!

[Ozzy]

Hi @Rad

Thank you.
That does the trick.

I forgot to mention that I would like to have that also in active state.

Can you help?

[ruenel]

Hey @Breix,

To include both the active and hover state, you can update the code and use this:

/* Active */
$el .x-tabs-list > ul > li:nth-child(1) button{
  background: url(http://example.com/button-1-background.jpg);
  background-size: cover;
}

/* Hover */
$el .x-tabs-list > ul > li:nth-child(1) button:hover{
  background: url(http://example.com/button-1-background.jpg);
  background-size: cover;
}

We would love to know if this has worked for you. Thank you.

[Ozzy]

Hi @RueNel

Thank you.
That code makes all buttons with an image (active and inactive)
I meant having the background image on the hover and active state only.

Is that possible?

[christian]

Hey @breix,

The active tab has a class of x-active so the correct code for active is this:

/* Active */
$el .x-tabs-list > ul > li:nth-child(1) button.x-active[data-x-toggle="tab"] {
  background: url(http://example.com/button-1-background.jpg);
  background-size: cover;
}

Here’s an alternative method just so you know. You can use that in the individual tab’s Element CSS.

1. Inspect each individual tab.

2. Add this Element CSS

$el.x-active[data-x-toggle="tab"] {
  background: url("http://example.com/image.jpg");
  background-size:cover;
}

3. For hover, you can add this code still in the individual tabs if you want to customize each tab toggle.

.x-tabs-list $el[data-x-toggle="tab"]:hover {
  background: url(http://example.com/hover.jpg);
  background-size:cover;
}

Hope that helps.

[Ozzy]

Thank you @christian_y

[lely]

You’re always welcome @breix!

Cheers.