tabs - Click on image to open Text

admin管理员组

文章数量:1122846

I"m using Tabby Responsive Tabs at the moment but I was wondering if anyone knows how to make a tab section where you click on an image, and text comes up instead of the standard text tabs? Would I have to use CSS or can it be done in Wordpress? Thanks

I"m using Tabby Responsive Tabs at the moment but I was wondering if anyone knows how to make a tab section where you click on an image, and text comes up instead of the standard text tabs? Would I have to use CSS or can it be done in Wordpress? Thanks

• tabs

Share Improve this question asked Dec 24, 2017 at 18:05 Katie N.Katie N. 133 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.

本文标签： tabsClick on image to open Text