Problems with the application of the class skew

Tips and Tricks
1

I would like to make any number of columns on a page across the width and height of the browser window. I would like to modify these columns with the Skew class so that the columns skew to the right. In these cols a hintegrund image should be placed fully. I am currently so far:

Now I have the following problems, which I cannot solve:

  • The column left has a white space at the top left, which I don’t want.
  • The right column has a white space at the bottom right, which I don’t want.
  • I have a scrollbar both horizontally and vertically, which I don’t want
  • For the hover effect, I want the column to scale up by a value (e.g. 1.5), but the slope of the column to stay the same. The effect should be that the column zooms in on you.

Can anyone help me here?

2
3

Here is something I quickly put together… not perfect but hopefully a step in the right direction.

Uses a clipping path on the middle image instead of skew so that the images don’t get distorted.

Not responsive at the moment

https://snippets.bss.design/