Is there a neat way to achieve this interactive grid setup?
I'm developing a site for a company, designed by their in house designer. They want their team grid to work like in the screenshots. So a basic grid with all members, then by clicking on a person's profile it expands to cover the grid, obscuring the other members. Is there a simple way to do this or is it only going to be possible with fiddly js? I suggested using gsap flip and having the selected team member take up two columns and two rows but the bios are all so long and they don't want to trim them down that they need to take up 4 columns and two rows.
7 Replies
i did a quick set up for this. (styling is up to you.
Used js to populate the html (array of teammembers) and to have the clickevents and logic already attached
https://codepen.io/MarkBoots/pen/WNBxEQe
Whoa, thanks Mark! Looks and works great
As usual, Mark has already given you a great solution.
However the design interested my and I challenged myself to come up with a CSS only solution which may or may not be of interest.
This uses buttons to toggle the selected images and their related bio so should be keyboard friendly.
https://codepen.io/cbolson/pen/eYazjGO
Chris Bolson
CodePen
Interactive gallery with photo description. HTML & CSS only
This was inspired by a question on Kevin Powels Discord: https://discord.com/channels/436251713830125568/1242875096901619736/1242875096901619736...
love the transitions. great work
Amazing Chris! You guys are incredible
@Chris out of interest, how do I change the behaviour so that only the close button closes the team member? At the moment the current behaviour is stopping each member's linkedIn button from working
In reality the "close" button is not actually doing anything itself. All it does is takes the focus away from the main button (which holds the images) and therefore closes the team member.
I will have another look at my code but in all honesty, you would probably be better off using JavaScript as this sort of solution, whilst it is a nice challenge to get it to work in just CSS, is not really very robust when things get more complicated.
In fact the links that I had included to the original pexels.com images don't work either 🤔
.... ok, that was simpler than I expected.
I swapped the code that detected the button focus-visible for selecting the article:focus-within.
That keeps the focus on the team member active when you click on it's links (you can check by clicking on the Pexels links in mine).
I have then re activated the code on the "close" buttons which I had commented out so now they do actually do something.
But in all honesty you would probably be better off going with a more robust JS solution.
OK thanks Chris, I'm happy to use a bit of js! I still bow to your css mastery, very impressive