Trying to apply clicked style to Collection List on Collection Template Page

Hi!

I’m building a portfolio site that shows all Projects in a tiled collection list that I wanted to display above the Collection Template Page content. I’ve done an OK job of making it to where the grid’s full-width background image changes with each project, and that you see a project thumbnail image on hover.

But what I can’t figure out how to do is style the selected/clicked tile with a black background and white headline text (basically reversed out, showing you which project is selected). I tried using Interactions to show a hidden div inside the collection item on page load but no luck — it usually turns the whole grid black. Here’s a screenshot of the desired effect in adobe illustrator:

And this is what it looks like now: LINK

Is this something I can do? Or do I need to rethink how I’m organizing the projects (not sure if trying to use a Tab system or pop-up is easier)?

Hi @Ryan_Heape !

You can achieve this by setting a Visibility Condition on a div containing the white title.
The condition have to be set as : if it is the current Project then Display the div .selected

Unfortunately, you will have to detach your instance of the component Project Grid as you won’t have access to the Project condition. But again, it works on all pages since it is from the same template :smiley:

Hope it helps ! Have a nice day

1 Like

@jptrinh Thank you so much. That did exactly the trick! You’re a legend.

1 Like

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