Team Member Photos Stack with Hover Tooltips in Bricks

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.