Herman Baiatian shared in the Bricks Facebook group here that he worked on overlapping team member headshots showing info in hover tooltips. I recreated it by seeing his video demo and, in this Pro tutorial provide steps to set up the same. Also, check the version of BricksBee Components for Bricks Builder.
We shall use a ‘Team Member’ CPT and show featured images in a team member posts query loop, display the post title, Job Title custom field value and LinkedIn URL field values in the tooltips on hover.
Step 1
Register a Team Member CPT using your favorite CPT plugin.
Add a corresponding field group having Job Title and LinkedIn Profile Link fields.
Add a few team member posts and populate the fields for each. Remember also to attach headshot profile photos.
Step 2
Edit a Page/template where you would like to show the stacked team members, with Bricks.
Copy the JSON of the fully-built section from the link below and paste it.
Click the query loop icon and ensure that the correct post type is set.
Recommended: Specify a fixed number of posts like say 5.
Here’s the LinkedIn SVG file.
That’s it! Check on the frontend.
Note: A few ACSS variables are used. If you do not use ACSS, replace the variable values like var(--black) with your own color values/variables.
You can click on the elements, check the CSS rules and custom CSS for the elements in the builder to see how it is all put together.