Translation of item in hover
Hi everyone I want realise this animation
but I don t know to begin can I have some idea .NOT CODE just some idea I want realise it myself thanks by advance
but I don t know to begin can I have some idea .NOT CODE just some idea I want realise it myself thanks by advance
6 Replies
Looks like a grid task. Those boxes have some size (1 large + 3 small) and position within the grid, which change, presumably on some event / trigger.
@majkl has it right. Probably transitioning or animating grid-template-columns/rows
I understand it the question is how to realise the event/trigger ?
Depends on you entirely - you want it and I have no idea what you are pitching. 😄 May be scroll, click, hover, focus, checkbox, radio, mouseover, action on adjacent element...
In the video it looks like a hover trigger, you could set it up so that whichever image is hovered on expands to span 2 cols/ 2 rows
thank you