Two image hover effect css

I have two images one on top of another and have a neat looking transition when you hover with a mouse over it.

I have a problem though, I can't get my image to stick to inside my dotted box which I had created (see my fiddle) ...

If you can take a look at my fiddle it would explain my poor wordings...

As you can see in my example, I would like if my monitor could stay inside my dotted box. Currently, when you scroll down/or up monitor goes out of it ( underneath it.. )

Is it even possible to do with pure css without having background-position fixed ? if not, with what is?

Any help would be appreciated.

body {
  height: 1000px;
}

.w {
  border: dotted;
  margin: 0 auto;
  white-space: nowrap;
  max-width: 261px;
  width: 100%;
  height: 212px;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: rgba(66, 66, 66, 0.5) url("https://helpzona.com/testing/servicesHD.jpg?fit=crop&fm=jpg&h=1080&q=75&w=1920") repeat fixed;
  background-position: 50% 100%;
  background-repeat: none;
  background-size: cover;
  z-index: 5;
  font-size: 0;
}

.i {
  width: 40px;
  height: 100%;
  display: inline-block;
  position: relative;
  z-index: 4;
  padding: 2px;
  transition: all 5.3s ease-in-out;
  background: rgba(66, 66, 66, 0.5) url("https://helpzona.com/testing/servicesHD1.jpg?fit=crop&fm=jpg&h=1080&q=75&w=1920") repeat fixed;
  background-size: cover;
  background-repeat: none;
  background-position: 50% 100%;
  border-radius: 0%;
}

.i:hover {
  -webkit-transition: all 0s linear;
  transition: all 0s linear;
  opacity: 0;
}

<body>
  <div class="w">
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
    <div class="i"></div>
  </div>
</body>

Solution

Here is an idea using pseudo element and clip-path:

.w {
  border: dotted;
  margin: 0 auto;
  width: 264px;
  height: 200px;
  position: relative;
  display: flex;
  background: 
    rgba(66, 66, 66, 0.5) url("https://helpzona.com/testing/servicesHD.jpg?fit=crop&fm=jpg&h=1080&q=75&w=1920") 
    top/auto 150% no-repeat; /* this should be the same as */
}

.i {
  width: 100%;
  clip-path: inset(0);
}

.i::before {
  content: "";
  position: absolute;
  opacity: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    rgba(66, 66, 66, 0.5) url("https://helpzona.com/testing/servicesHD1.jpg?fit=crop&fm=jpg&h=1080&q=75&w=1920") 
    top/auto 150% no-repeat; /* this! */
  transition: all 5.3s ease-in-out;
}

.i:hover::before {
  opacity: 0;
  transition: all 0s ease-in-out;
}

<div class="w">
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
  <div class="i"></div>
</div>