Show Multiple Responsive Full Height Skewed DIV inline with Straight Background Image and Text inside DIVs

Question

Well, Thanks for the duplicate Link but it is different from that and was not answered there.

I am trying to make a slider or a background DIV with full height as per parent DIV where I will have the multiple DIVs inside and inline that were skewed up a little bit equally as shown in the picture and a DIV of text/link/paragraph/headings over it.

Here I got till here as shown in the pic with the below code but the remaining problem is as follows.

1. Background images should be straight not skewed.
2. Also, want the background image opacity light on hover not the text over it

<style type="text/css">
* {
  padding:0;
  margin:0;
}
.container {
  display: flex;
  height: 600px;
  overflow:hidden;
}

.box {
  flex: 1;
  border: 1px solid;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
     background: #fff;
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
}

.inner {transform: skew(25deg);}
.box:first-child {
  margin-left:calc((100% / 5) / -2);
}
.box:last-child {
  margin-right:calc((100% / 5) / -2);
}
}
</style>
<div class="container">
  <div class="box" style="background-image:url(https://picsum.photos/400/200/)"><div class="inner">Hello</div></div>
  <div class="box" style="background-image:url(https://picsum.photos/400/300/)"><div class="inner">Hello</div></div>
  <div class="box" style="background-image:url(https://picsum.photos/300/200/)"><div class="inner">Hello</div></div>
  <div class="box" style="background-image:url(https://picsum.photos/400/300/)"><div class="inner">Hello</div></div>
  <div class="box" style="background-image:url(https://picsum.photos/200/300/)"><div class="inner">Hello</div></div>
</div>

Note: Reproduce this code in a demo.html File if not seeing a full-screen design in JSFiddle or CodePen.

So what are the changes required in my code?

---

Answer:

Check Live At: https://jsfiddle.net/x4pshebk/

<style type="text/css">
* {
  padding:0;
  margin:0;
}
.container {
  display: flex;
  height: 100vh;
  overflow:hidden;
}

.box {
  flex: 1;
  border: 1px solid;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
}

.inner {
    transform: skew(25deg);
    text-align:center;
    color: #FFF;
    font-size: 30px;
}
.box:first-child {
  margin-left:calc((100% / 5) / -1);
}
.box:last-child {
  margin-right:calc((100% / 5) / -1);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  right: -60%;
  width: 300%;
  transform: skew(25deg);
  background-image: var(--i);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
</style>
<div class="container">
  <div class="box" style="--i:url(https://picsum.photos/400/200/)"><div class="inner">Hello</div></div>
  <div class="box" style="--i:url(https://picsum.photos/400/300/)"><div class="inner">Hello</div></div>
  <div class="box" style="--i:url(https://picsum.photos/300/200/)"><div class="inner">Hello</div></div>
  <div class="box" style="--i:url(https://picsum.photos/400/300/)"><div class="inner">Hello</div></div>
  <div class="box" style="--i:url(https://picsum.photos/200/300/)"><div class="inner">Hello</div></div>
</div>