How to make a tab or Button out of elements to create click to reveal content

[Col]

Hello! So I have this webflow project that I’m working on. I would like to make the photos at thebe such that when I click them, the larger square in the middle will change to show either another image, or section? I essentially want to click them and show information connected to the name of the section. Also, at the bottom of the site, do you see the other icons there? I want to be able to click any of them so that the original image is shown.

But I do not know how to do all of this without changing the appearance with tabs. Also, When I tried and used tabs for the photos at the top: I changed the background to be transparent, but when I changed the viewport to go to mobile, tablet, sideways phone, it no longer sized down properly anymore.

TDLR: I want to be able to click on icons to reveal more info. I want to do so in a way where when the viewpoint is changed, it can scale down properly.

Here is what they look like now when sized down:

---

Here is my public share link: LINK
(The Current Published site)

[joejola (Joseph Amato)]

You should be able to do all of this with tabs. But instead of linking the tab to the section, you just add the content to the tab pane.

[Col]

ok, I’ll try and to this tab thing again and see what changes.

[Col]

@joejola Ok so I have made the top section into tabs.

Question 1: But How can i make the partnerships link to an external site instead of having a tab pane?(the fourth photo on the top right hand side) . Or maybe even have the Partnerships tab pane be pressed and a custom HTML code be executed?

Question 2: How can I make the tabs so that when the viewpoint is changed, It can decrease properly? I have photos of what it initially looked like before I changed the top to be all tabs. but now, when I switch to mobile, this is what it looks like:

[joejola (Joseph Amato)]

Question 1: You will either need custom code or create a link block with absolute positioning to make it look identical to the tabs.

Questions 2: Simple layout configuration. See how I changed your tab links.

[Col]

@joejola Okkkk so I have done the link block thing and the tab links (TYSM!!! ) now, The only problem I am having right now, is when I put content in the tab. How can I make it such that the following is done:

1. How can the initial photo in the center be seen without anyone clicking on a tab yet? (see below the problem of putting the content in the tabs)?
2. How do I make it that when I click one of the tabs, this main picture in the back disappears? ( Instead of trying to fit the tab content over the first photo)?

When I tried to put the original photo into the first tab’s content to retrofit the positioning of the original photo, it shifted some of the elements like this:

When I go to the preview mode and click on the second tab ( this doesnt have content yet)

[joejola (Joseph Amato)]

Styling:

1. Vertically align Tabs and Tabs Menu
2. Set each Tab Link padding to 10 px left and right
3. Remove the Link Block and add a fourth Tab Link
4. Follow this guide for adding custom code. This will allow you to set a Tab Link to an external URL

Solution - creating an URL link for a specific tab

Hi all, I needed a solution for creating an URL link for a specific tab, i found other solutions like Accessing tabs from address bar or Linking to Specific Tab from another Link or Button but i needed a specific separate url for each tab. Then I found this solution How to create a link to a specific tab? , (thanks a lot @design) and improved it a bit because it didn’t work well for me :). So here you have an improved solution: <script> $( function() { function changeTab() { var …

For content:

1. Select the content you want, and paste it into the Tabs Pane. The Tabs Pane corresponds to each Tab Link

[Col]

@joejola Thank you so much. here is the current read-only link: https://preview.webflow.com/preview/col-test-last-supper?utm_medium=preview_link&utm_source=designer&utm_content=col-test-last-supper&preview=b716117894205e48448bcfdaba32c82b&mode=preview. I was able to do the link block thing that you discussed earlier!

So now I am trying to put content in the tabs, but I am having the following problems:

1. When I start changing the 'Tabs content, the ‘Partnerships’ photo shifts down. How can I fix this?
2. Following my past question, how can I make it such that when people initially come to the site, you don’t see any of the tabs’ content?
3. How can I make it so that when I put in content into the tab, It is within the size of the ‘Image 8’ size where the original “Colborare” photo is?
4. When I try adjusting the size of the tab content, it doesn’t shrink properly, how can I fix this?( see photo pertaining to question 4 below).

Pertaining to question 1:

Pertaining to question 2

Pertaining to question 4