It seems it starts by a container with N children each one covering the same width and containing an image. You can achieve this part by many ways, for instance, using CSS Grid.
For the hover state in each slide it's just setting the width of the hovered element to a fixed width and scaling a bit the image. This can be done by using CSS transforms and transitions.
You will need extra help for getting the gooey distortion when approaching the slide's bounds. WebGL or jQuery could do that.
Top comments (2)
It seems it starts by a container with N children each one covering the same width and containing an image. You can achieve this part by many ways, for instance, using CSS Grid.
For the hover state in each slide it's just setting the width of the hovered element to a fixed width and scaling a bit the image. This can be done by using CSS transforms and transitions.
You will need extra help for getting the gooey distortion when approaching the slide's bounds. WebGL or jQuery could do that.
Check this pen for the distortion:
codepen.io/waaark/pen/ENRvvq
thanks @eneasmarin
without canvas its possible or not..?