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

HTML-CSS
21

Then what? https://jsfiddle.net/k3ap6u9n/1/

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

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

background-position-x changes the horizontal positioning of the image, so having top as the value really doesn’t make any sense. And if you look in your browser’s dev tools inspector there is a good chance it is telling you that the value top is invalid.

What does “auto, auto” accomplish for the background size? Remember, you want the background image for each panel to actually be as wide (and tall) as the browser window but then you are only going to show half of it (the left half for the left panel and the right half for the right panel). I’m certain there is some unit that will allow you to size the image based on the browser’s view port size.

Be sure you understand what each CSS property you are using does. Don’t just change something because someone told you to :slight_smile:

23

Would this be it?

100vh;

Then what? https://jsfiddle.net/92bxjwmk/2/


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

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

You are on the right track. Remember, you want the image to cover the entire view port, both height and width.

25

What am I supposed to do next?

26

I want you to figure that out. I think I’ve given enough hints to help you. Do you understand exactly how I suggested you go about implementing this? If not, then please ask for clarification on what you don’t understand.

27

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

How does that happen?

What do I need to do for that to occur?

28

You can’t just magically split a single image into two images (at least not with simple CSS). One way I suggested is to have two copies of the background image, both taking up the entire browser view port, but only show 50% of the left side of the image in the left panel and 50% of the right side of the image in the right panel. When you put the panels together they make the complete image and then you can slide them apart in your transition effect. Does this explanation make sense to you?

I have been able to implement my solution with just a few changes to your existing CSS. I told you which CSS properties I changed. I’m not going to just tell you what to do because this is a learning forum so we don’t generally just tell people what to do, we like to help them understand what to do and guide them along as they figure it out on their own.

My suggested solution may not be the best and there are probably other ways to do it, but it does work with minimal changes to your existing CSS so it’s at least a good first attempt.

Perhaps someone else here will chime in with a different solution? I can tell you that mine works with changes only to background-size and background-position-x. If you don’t understand how these two properties work then you’ll need to read up on them a little more and make an honest attempt at using them to solve your problem. After you have given it your best shot, if you are still having problems then let me know specifically what you don’t understand. But just asking “how do I do this” and expecting the exact answer is not something I’m willing to do.

1 Like
29

This takes up the whole screen area. https://jsfiddle.net/7q24vocm/1/

What do I do after this?

50% left is covered
50% of the right is covered.

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

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

background-size: center center; makes no sense. What does centering have to do with background size? Again, if you look in the dev tools inspector it is most likely telling you that this is an invalid value for background-size. Let me reiterate one more time, you can’t just throw values at a property without understanding what the property does.

I gave you this hint above as to what units you should use to size the background image. If you aren’t certain what the hint pertains to then use the power of google to search for “css view port units”.

1 Like
31

Both sides are 50% full now.

code: https://jsfiddle.net/7q24vocm/7/


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

}

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

I think you also want the image to take up all the height too, right?

Refer to the MDN documentation to see how you can set both the width and height with the background-size property. If you use 100vw to take up the entire width of the view port, what would you use to take up the entire height?

The left panel will show the left side of the image, which is the default, so you don’t even need to specify a background-position-x for the left panel, but if you do, it won’t have a value of center. Remember, you want the left panel to show the left 50% of the image, so you don’t want it to be centered. Now you know that you only need to mess with the background-position-x for the right panel. Again, it won’t be center. You’ll need to experiment to figure out how to shift it to the left so that the right 50% of the image is showing.

1 Like
33

Something like this?

Is your way better?

code: https://jsfiddle.net/2asm4kwd/4/


.curtain {
  position: relative;
  width: 100%;
  height: 100%;
}

.curtain.slide {
  height: auto;
  min-height: 100%;
  overflow: hidden;
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all ease 8s;
  overflow: hidden;
}

.panel-left {
  left: 0%;
}

.panel-right {
  right: 0;

}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: url("https://picsum.photos/1028");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position-x: 100% ;
  pointer-events: none;
}

.panel-right::before {
  left: -100%;
}

.curtain.slide .panel-left {
  transform: translateX(-100%);
}

.curtain.slide .panel-right {
  transform: translateX(100%);
}
34

Well, at the beginning, before you click on the button, it looks good, but then when you click and the transition starts the image shifts to something that doesn’t look so good and the effect is lost.

Question: Why did you switch back to percentages for the background-size when you were doing so well using view port units?

1 Like
35

How was your code set up?

So I can see the difference, and to see if I am able to come up with something else based off of that.

36

What are your thoughts on how this one is set up?

And is there a way I can improve it, make it work better?

code: https://jsfiddle.net/3htoa8ex/2/


.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-size: 100vw;
  background-repeat: no-repeat;
  background-position: top;
}

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

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

It doesn’t seem to be doing what you want it to do so I guess I wouldn’t be satisfied with it.

The remaining issue is with the background-position property on the left/right panels. I think I mentioned above that you want to change those to background-position-x. I’ll even get you started. Set the left panel to 0. Now you just have to figure out what to set the right panel to.

If you don’t change anything else except what I mentioned above it should work the way you want it to.

1 Like
38

I have a question, between these two, which is better to use?

i.e., Is setting it up one way better than the other?

or, does one make more sense than the other?

And thank you for your help.

code: https://jsfiddle.net/mhgw5078/2/

.door-left {
  left: 0%;
}

.door-right {
  left: 50%;
}

code: https://jsfiddle.net/wo02ju5f/

.door-left {
  left: 0%;
}

.door-right {
  right: 0%;
}
39

I have to do this, but don’t know how.

Position the play button in relation to the revealed content instead of the page.

When the play image is clicked on it drops to the bottom, how do I prevent that?

To reproduce, click on it, and you will see it dropping down.

Click on it, scroll down and you will see the image has dropped.

How do I get it to stay in the same spot without dropping?

https://jsfiddle.net/Lndptks3/2/

Before clicking on image

After clicking on image


You can see the play image falling down, how do I stop that from happening?

html,
body {
   height: 100%;
   margin: 0;
   padding: 0;
}

body {
   background: #353198;
}

.curtain {
   position: relative;
   width: 100%;
   height: 100%;
}

.curtain.slide {
   height: auto;
   min-height: 100%;
   overflow: hidden;
}

.panel-left,
.panel-right {
   position: absolute;
   height: 100%;
   width: 50%;
   top: 0%;
   transition: all ease 20s;
}

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

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

.curtain.slide .panel-left {
   transform: translateX(-100vw);
}

.curtain.slide .panel-right {
   transform: translateX(100vw);
}

.outer {
   display: table;
   height: 100%;
   margin: 0 auto;
}

.tcell {
   display: table-cell;
   vertical-align: middle;
}

.jacketa {
   position: absolute;
   width: 180px;
   height: 180px;
   cursor: pointer;
   border-radius: 50%;
   background: #130e85;
   border: 3px solid #f91f6e;
   box-sizing: border-box;
}

.jacketa .coversvg {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: auto;
   cursor: pointer;
}

.jacketa .coversvg {
   width: 70px;
   height: 75.4px;
   fill: none;
   stroke-width: 4px;
   stroke-miterlimit: 10;
}

.jacketa .coversvg .back {
   stroke: #000;
   opacity: 0.15;
}

.jacketa .coversvg .front {
   stroke: #08f9ff;
   stroke-dasharray: 150;
   stroke-dashoffset: 1500;
   animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}

@keyframes draw {
   100% {
      stroke-dashoffset: 0;
   }
   100% {
      stroke-dashoffset: 0;
   }
}

@keyframes flicker-1 {
   0%,
   100% {
      opacity: 1;
   }
   41.99% {
      opacity: 1;
   }
   42% {
      opacity: 0;
   }
   43% {
      opacity: 0;
   }
   43.01% {
      opacity: 1;
   }
   47.99% {
      opacity: 1;
   }
   48% {
      opacity: 0;
   }
   49% {
      opacity: 0;
   }
   49.01% {
      opacity: 1;
   }
}


/* split the svg code below */

.split-wrap {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 180px;
   height: 180px;
   margin: auto;
   border-radius: 50%;
   box-shadow: 0 0 20px 2px #f9066bf7;
   transition: 20s ease;
}

.j1 {
   position: absolute;
   left: 0;
   top: 0;
   width: 50%;
   height: 100%;
   overflow: hidden;
   transition: 20s ease;
}

.j2 {
   position: absolute;
   left: 50%;
   top: 0;
   width: 50%;
   height: 100%;
   overflow: hidden;
   transition: 20s ease;
}

.j2 .jacketa {
   right: 0;
   left: auto;
}

.curtain.slide .split-wrap {
   box-shadow: 0 0 20px 2px rgba(249, 6, 167, 0);
}

.jacketa {
   display: block !important;
}

.container {
   height: auto;
}

.curtain.slide .j1 {
   transform: translateX(-100vw);
}

.curtain.slide .j2 {
   transform: translateX(100vw);
}

.j2 .j1 {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: auto;
}

.container {
   width: 990px;
   height: 990px;
   margin: 100px auto;
   padding: 25px;
   overflow: hidden;
   border-radius: 25px;
   border: 2px solid #0059dd;
   box-sizing: border-box;
   background: #000000;
}

.container-top {
   position: relative;
   height: 310px;
   margin: 0 0 45px 0;
   border-radius: 25px;
   border: 3px solid #0059dd;
   box-sizing: border-box;
   background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
   background-size: cover;
}

.hide {
   display: none;
}


<div class="curtain">
  <div class="outer">
    <div class="tcell">

      <div class="container hide">
        <div class="container-top">
        </div>
      </div>

      <div class="panel-left"> </div>
      <div class="panel-right"> </div>

      <div class="split-wrap">
        <div class="j1">
          <div class="jacketa" title="[ Enjoy The Music ]">
            <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
              <title>[ Enjoy The Music ]</title>
              <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
              <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
            </svg>
          </div>
        </div>
        <div class="j2">
          <div class="jacketa" title="[ Enjoy The Music ]">
            <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
              <title>[ Enjoy The Music ]</title>
              <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
              <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
            </svg>
          </div>

        </div>
      </div>
    </div>
40

This is the answer:
https://jsfiddle.net/amLed3hp/1/

  background-image: url("https://picsum.photos/1920/1080");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}