Streaming live at 10am (PST)

Retaining ratio of a slider in a grid


#1

Hey friends!

I can’t figure a way to create a responsive 3 column card layout with a slider inside that retains the aspect ratio when scaling.

I’m looking to create this 3 card layout:
https://www.mendo.nl/store/

I’ve been through the University but can’t find a video that explains this.

Any help?

Thanks!


Here is my site Read-Only:

https://preview.webflow.com/preview/thanks-ultra-awesome-project?utm_source=thanks-ultra-awesome-project&preview=9e679fb420447a5bd1ca76c5fdac40c3


#2

There’s a neat rule in CSS:

A percentage value on top/bottom padding or margins is relative to the width of the containing block

This allows to create elastic squares or any element that’s supposed to keep a certain aspect ratio.

I made a demo here:


#3

Thank you Vincent!

Do you happen to know if there’s a way I can recreate the hover slider on the cards as well?

Having the “card” display a different image depending on the mouse position?


#4

There are many ways to achieve this I guess. You can have three or more overlaying divs to catch the hover, so three transparent “columns” side by side, that will trigger animations for the element underneath.