Hi,
Wondering if anybody could lend a hand 
I’m trying to create the below in bricks and was wondering if anybody knew of a way I could go about achieving this?
What I’m after is as the user clicks on each number, the adjacent image and text will go from black and white to full colour. With the previous step then changing from full colour to black and white
I can do the basic heading and background image, it’s mainly the actual process animation itself I’m stuck with.
Any help would be appreciated.
Thanks!
I would be trying to set this up by adding/removing a class to the target block via Interactions. One class for the image and one class for the block containing all the elements.
So as a default, add a class for the image which applies a grayscale filter to the image and a class for the block that contains all the elements and set the opacity to something like .5.
Then add Interactions to the number block that removes the classes from the adjacent step on click and another interaction to the same number block that adds the classes to the previous step on click.
So four interactions in one number block:
- On click, remove class from the image in the adjacent step.
- On click, remove class from the block containing the adjacent step elements.
- On click, add class to the image in the previous step.
- On click, add class to the block containing the previous step elements.
2 Likes
Hi,
Thanks for the input, much appreciated!
I’ll give this a go.
Any idea on how I would go about creating the progress bar down the middle of the page?
Thanks
I would use a before or after pseudo class to create the vertical line.
There most likely is a better way of doing this but the structure would be:
Process Card [ Grid 3 Columns]
Content Wrapper [ Column 1]
Process Heading
Process Description
Process Timeline [ Column 2 ] Pseudo element for vertical line goes here
Process Number
Media Wrapper [ Column 3 ]
Image
Here’s a demo link.
