Box-shadow is being cut off of the image

Admin 1
Viewed 136

The image should look like this.

box-shadow added to the code: Image

Instead, it is looking like this and I don't know why and how to fix it. Image

You can see the box-shadow is being cut off of the image on all 4 sides.

How do I fix it so that the image isn't being cut off?

Code: https://jsfiddle.net/8mgvn40u/

.curtain {
  width: 550px;
  height: 250px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  background: #000000;
  box-sizing: border-box;
}

.jacketa {
  position: absolute;
  width: 180px;
  height: 180px;
  cursor: pointer;
  border-radius: 50%;
  background: #130e85;
  border: 3px solid #f91f6e;
  box-sizing: border-box;
  box-shadow: 0 0 20px 2px #f9066bf7;
   
}
.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-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 180px;
  height: 180px;
  margin: auto;
  border-radius: 50%;
  transition: 0.5s ease;
}

.j1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 5s ease;
}
.j2 {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 5s ease;
}
.j2 .jacketa {
  right: 0;
  left: auto;
}
.curtain:hover .j1 {
  transform: translateX(-500%);
}
.curtain:hover .j2 {
  transform: translateX(500%);
}
<div class="curtain">

  <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>

css-transitions css html
2 Answers

Because of overflow, bow-shadow gets cut-off (already said) , You could also use transform to easily keep the shadows within the visible area.

increase first the hidden overflow area then decrease what stands inside. smaller it won't get clipped anymore.

example of the idea with a short fixed involving : transform:scale(1.1)VS transform:scale(0.9) to keep a close ratio of the initial layout size.

.curtain {
  width: 550px;
  height: 250px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  background: #000000;
  box-sizing: border-box;
}
.split-wrap{
transform:scale(1.1);
}
.jacketa {
  position: absolute;
  width: 180px;
  height: 180px;
  cursor: pointer;
  border-radius: 50%;
  background: #130e85;
  border: 3px solid #f91f6e;
  box-sizing: border-box;
  box-shadow: 0 0 20px 2px #f9066bf7;
  transform:scale(0.9);
   
}
.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-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 180px;
  height: 180px;
  margin: auto;
  border-radius: 50%;
  transition: 0.5s ease;
}

.j1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 5s ease;
}
.j2 {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 5s ease;
}
.j2 .jacketa {
  right: 0;
  left: auto;
}
.curtain:hover .j1 {
  transform: translateX(-500%);
}
.curtain:hover .j2 {
  transform: translateX(500%);
}
<div class="curtain">

  <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>

user_24420990

that happening because you gave overflow: hidden to .j1 and .j2, changing it into overflow: visible will fix the box-shadow issue but will mess up your curtain animation.

alternatively you can make .j1 and .j2 bigger but with padding so the box-shadow won't overlap it.

user_99859690
Related