DEV Community

pratikdungarani
pratikdungarani

Posted on

Can any one suggest how to create this type of slider. https://in.pinterest.com/pin/862720872360739856/

https://in.pinterest.com/pin/862720872360739856/

Top comments (2)

Collapse
 
marmeden profile image
eneasmarin

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

Collapse
 
pratikdungarani profile image
pratikdungarani • Edited

thanks @eneasmarin

without canvas its possible or not..?