Problems with the application of the class skew

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?

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