Click on image to open Text

You can certainly do things like this easily via CSS.

However, to know what options are available in WordPress, perhaps you can provide a bit more details on how you’d like it to work… can you provide a screenshot (use PowerPoint or a Google Drive Drawing) to make an outline if necessary.

Here’s an example how to use an image in the first Tab via CSS (if that’s what you wanted).

This one uses css for the tab plugin you mentioned. To get the exact css for any tab plugin, inspect the element with the browser developer tools. (For instance right click on the tab, and choose Inspect in Google Chrome)

Quick trick, set a background-image and make the text transparent. Normally tabs that are selected will have additional css, like active in it’s class attribute… (in the tab plugin you are using, they add the class name: responsive-tabs__list__item--active). So, for a good effect, set the opacity lower for all tabs and set the active tab’s opacity to 1.

#tablist1-tab1 {
    color: transparent;
    background-image: url('{image url}');
    opacity: 0.2;
}
.responsive-tabs__list__item--active{
    opacity: 1!important;
}

EDIT: The !important was only added here to quickly cover all possibilities. However, test accordingly and remove if it’s not necessary. Or, modify existing css code if required to avoid completely.

Related Posts: