Create tab using images on button

Question

I need to create a TAB block for my site in wordpress, there are several plugins that help in this, but do not discover any that I can use images on the button. They’re usually icones, but my client created a few images, which was very complicated. Also, you have the little arrow that appears below the button when it is active.

Follow the image of how TAB should look:

I have installed several plugins, but I could not do with the image nor the arrow. Note that the active button is yellow with black text, and the other inactive ones are red with white text and the image is yellow.

I really need to fix this block!

Answer 1

You can solve this by customizing a CSS. Basically you have the images of each tab, turn these images into icons, and link to the id of each tab.

To resolve the issue of active tab: Inspect the element when you have a tab open, you probably have a class on that tab (".active" or something), just customize the css for that class, leaving the background yellow and the color black. Follow a quick example...

https://jsfiddle.net/Darlei_Zillmer/nguxshu8/