How to create Tabs Like Netflix Homepage?

I am trying to create tabs like that have the same functionality Netflix have on their homepage. Does anyone have any tips or advice on how I could accomplish that, preferably with only using CSS? I have attached a screenshot below that show what section I am referring to. Would appreciate any help!

Generally that’s done with a little js to toggle the active tab but you can do it using the checkbox hack in css alone but only for modern browsers.

It’s explained here:

Thanks for the tips Paul! I am using wordpress and can’t seem to get the tabs to work.

At this point I am open to using JS, so if anybody could give me tips on how to implement tabs on wordpress site without using plugins it would be a huge help.

You will have to show us a page where you have inserted the html and css for us to debug properly. :slight_smile: The tabs clearly work in the demo and will work on any page if added correctly.

I don’t do Wordpress but I know you can add custom html and css when required.

PaulOB is right I use the checkbox hack alot because it’s fun but its sadly true it does not work on older browsers what I can see there is that

The border-bottom is changed from grey to red and size of it also changes.

Text and image color: changes to white also it’s very easy to get the text to change color but what I am unsure about is the image i wonder if its a symbol in the text library or they simply change the picture when on hover.

I have never used word press before I just use trusty notepad++ it helps me alot :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.