Tiles used as menu navigation; animating tile shadow on hover

[aap]

HI
I wold like to create a tile menu such as seen here, on this website.

How wold I go about that?

Right now I made tiles using standard rows and columns, and showing the shadow as should look on the hover event, as such;

How do I make sure clicking anywhere on the column takes user to the linked page?

Thankyou!

[friech]

Hi @flashfog,

Thank you for writing in, please utilize the Button element, yes the button element can do that as it has the graphic option, primary text, and secondary text option. Set its width and height to 100% so it’ll take up the entire column.

• 

For the shadow, set the base to transparent, and the interaction to 0.25 opacity (semi-transparent).

• 

Set the Child Placement to column so the image and text is stacked.

• 

Hope it helps,
Cheers!

[aap]

I will try. THANK YOU!

[friech]

You’re must welcome, let us know how it goes,

Cheers!