Box-shadow is being cut out, how is this fixed?

Is this something that can be done, or is it not possible?

code: https://jsfiddle.net/vnLfbamy/3/

.jacketa {
  z-index: 3;
}


.door-left,
.door-right {
  position: absolute;
  z-index: 2;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all ease 8s;
}

You can stack elements on top of each other without z-index. take look at this article

Were you able to successfully do it with my code?

And it worked?

I did not test it on your code. This is an alternative to z-index property in CSS.

I don’t think it is possible to do, I will keep trying though.

How would I go about restructuring the css/html so that z-index isn’t needed on the transition?

code: https://jsfiddle.net/rspxkyoL/

What would need to be moved around in the html/css?

How would I be able to implement that?

Where 1 image fills both left and right panels.

code: https://jsfiddle.net/kqLpv21h/

.panel-left,
.paneldoor-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all ease 8s;
  background-image: url("https://picsum.photos/600");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
}

.panel-left {
  left: 0%;
  background-color: rgb(91, 96, 106);
}

.panel-right {
  left: 50%;
  background-color: rgb(229, 211, 211);
}

.curtain.slide .panel-left {
  left: -50%;
}

.curtain.slide .panel-right {
  left: 100%;
}

Currently the image fills in both the left and right side.

I want only one image to appear, that fills in both sides.

I’m asking the obvious, but have you tried setting the background image on the container of the two panels instead?

Did doing that work for you?

How do I get the image to show?

code: https://jsfiddle.net/gf0eywbo/

.image {
  background-image: url("https://picsum.photos/600");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
}
<div class="image"> 
         <div class="panel-left"> </div>
         <div class="panel-right"> </div>
         </div>

Go into your brower’s dev tool inspector and look at the computed height on the image div you are adding this background to (you might have to add height: 100% to the div in order for the inspector to show you the current computed height). I think you will see why the background image isn’t showing.

As to how to get it to show? There isn’t one correct answer as there are many ways to do it. I’m not sure I understand exactly how you want to place the image though. Perhaps you could give a little more detail on what you are trying to do.

What I am trying to do:

Half an image on each side.

Meaning: Getting 1 image to appear instead of 2

Where 1 image fills both left and right panels.

How would that be done?

If I understand you correctly, you want the image to fill the entire background behind the animated circle? Then I would add the background image to an element that fills that entire area. Perhaps the curtain div? You’ll want to get rid of the background colors on the left/right panel divs.

Then what?

code: https://jsfiddle.net/a764ws9q/1/

The image should be attached to the curtain, but now the transition effect is not working.

Doing this works, but it causes the image to split into two separate images.

code https://jsfiddle.net/643xLh7t/2/

I didn’t test the transition effect. You just asked how to get the background image on there so that’s all I looked at. To be honest, I didn’t click on the animated circle so I had no idea there was even supposed to be a transition effect until you mentioned it just now.

I can’t see the transition effect now so I don’t know how it is supposed to work. Put it back in place and I’ll take a look.

Here: https://jsfiddle.net/kqLpv21h/

I just added it like this:

Doing that causes the image to split into two separate images.

I want one image to show as 1 whole image, then the transition effect to split it into 2 images.


.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all ease 8s;
  background-image: url("https://picsum.photos/600");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;

}

Currently the image fills in both the left and right side.

I want only one image to appear, as a full image.

Then have the transition effect split the image in half.

If I’m understanding correctly, you want a single image to split down the middle and pull apart? My guess is that you will need to put the background image on both the left/right panel divs, but only show the left 50% of the image on the left panel and the right 50% of the image on the right panel. That way when they are together they create one full image and then can be pulled apart in the transition effect.

Like this you mean: https://jsfiddle.net/gruxtycz/

Next: How do I do this?

only show the left 50% of the image on the left panel and the right 50% of the image on the right panel.

.panel-left {
  left: 0%;
  background-color: rgb(91, 96, 106);
  background-image: url("https://picsum.photos/600");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
}

.panel-right {
  left: 50%;
  background-color: rgb(229, 211, 211);
  background-image: url("https://picsum.photos/600");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
}

A couple of hints:

  • Instead of using a percentage for background size, which is relative to the element itself, consider other units you could use which are relative to the size of the browser.
  • To adjust the horizontal position of the the background image, use background-positon-x.