For further actions, you may consider blocking this person and/or reporting abuse
Read next
![obere4u profile image](https://media.dev.to/cdn-cgi/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F687479%2F984eb016-a5ad-43bb-8370-811286870404.jpg)
A Comparative Analysis of Alpine.js and ReactJS
Nwosa Tochukwu -
![smlka profile image](https://media.dev.to/cdn-cgi/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F378585%2F44cf4b3f-92ee-45fe-b66c-fb16afe33a34.jpg)
Merge array-like objects by Array.prototype.concat()
Andrey Smolko -
![bobbyiliev profile image](https://media.dev.to/cdn-cgi/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F191651%2Fa7ce5d4e-1298-48e7-b99e-a9755d786776.jpeg)
How to Vertically Align Content with Tailwind CSS Across a Full-Screen Div
Bobby Iliev -
![cachemerrill profile image](https://media.dev.to/cdn-cgi/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1465032%2F2cb5c7d6-0cd7-4bf7-b501-bb8bc7778dac.jpg)
Unlocking the Power of ReactJS: Top Features Every Product Manager Should Know
Cache Merrill -
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..?