How do I add overflow: hidden; where it won't hide the exit link image?

HTML & CSS
1

How do I add overflow: hidden; where the exit link image won’t disappear off the screen after that property is added?

https://jsfiddle.net/og853cde/

Right now it looks like this:

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

body {
  background: black;
  
}

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  display: flex;
}

.video-wrapper {
  flex: 1 0 0;
  margin: auto;
  max-width: 642px;
  position: relative;
}

.ratio-keeper {
  height: 0;
  padding-top: 56.25%;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


iframe {
  user-select: none;
}
:root {
  --wide: 8.8%;
  --angle1: 0;
  --angle2: -90;
}

.panel {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background:
    repeating-linear-gradient(calc(var(--angle1) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px)), repeating-linear-gradient(calc(calc(var(--angle2) + 90) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px));

  background-color: #B76BF0;
  border-bottom: 2px solid #191919;
  background-repeat: no-repeat;
  z-index: 0;

}

.container .panel {
  transform: translateY(0%);
  animation: curtainUp 8s ease-in forwards 1s;
}

@keyframes curtainUp {
  to {
    transform: translateY(calc(-100% - 1px));
  }
}

.fadingOut .panel {
  animation: curtainDown 8s ease-in forwards 1s;
  transform: translateY(calc(-100% - 1px));
  animation-delay: 3.3s;
}

@keyframes curtainDown {
  to {
    transform: translateY(0%);
  }
}

a {
  position: absolute;
  top: auto;
  bottom: -47px;
  margin: auto;
  right: 0;
  left: 0;
  width: 37px;
  height: 37px;
  background: black;
  border-radius: 50%;
  border: 5px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
 animation: fadeInExit 3s ease-in 0s forwards;
  /*animation-delay: 9s;*/
  opacity: 0;
  pointer-events: none;
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

a::before,
a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  background: red;
  transform: rotate(45deg);
}

a::after {
  transform: rotate(-45deg);
}

<div class="container">
  <div class="video-wrapper">
    <div class="ratio-keeper">
      <div id="ytplayer" class=" video-frame"></div>
    </div>
    <div class="panel "></div>
    <a href="" title="Exit" aria-label="Close"></a>
  </div>
</div>
1 Like
2

You can’t add overflow:hidden and not hide one thing within that context. You’d need to move the panel inside another stacking context and apply the overflow from there.

e.g.

.ratio-keeper {
  height: 0;
  padding-top: 56.25%;
  overflow:hidden;
  position:relative;
}

<div class="container">
  <div class="video-wrapper">
    <div class="ratio-keeper">

      <div id="ytplayer" class=" video-frame"></div>
 <div class="panel "></div>
    </div>
   
    <a href="" title="Exit" aria-label="Close"></a>
  </div>

</div>

Of course that may have consequences depending on your final use cases.

Also why are still adding extra elements for decorations and not using :before or :after pseudo elements as mentioned thousands of times already?

1 Like
3

Where would :before or :after pseudo elements have been used here?

1 Like
4

Instead of using the panel div. You’d use before or after (or both if the need arises). They are pseudo elements that require no mark up and are useful for containing items that are just decoration. They would be used from the same parent as the panel would have been.

If ever you have empty divs in your mark up you should ask yourself if there’s a better way to do it.

2 Likes
6

My attempt: https://jsfiddle.net/9gkj0bhf/

 .ratio-keeper::before,
.ratio-keeper::after {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background: #B76BF0;
}

.container .ratio-keeper::after {
  transform: translateY(0%);
  animation: curtainUp 8s ease-in forwards;
  animation-delay: 3s;
}

@keyframes curtainUp {
  to {
    transform: translateY(calc(-100% - 1px));
  }
}

<div class="container">
      <div class="video-wrapper">
        <div class="ratio-keeper">
          <div id="ytplayer" class="video-frame"></div>
        </div>
        <a href="" title="Exit" aria-label="Close"></a>
      </div>
    </div>
7

fixed: https://jsfiddle.net/k6a1nomy/

.ratio-keeper::before,
.ratio-keeper::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background: #B76BF0;
}
8

Do you see/notice the difference?

How would that be fixed so that pseudo element code works the same as the other?

Did I forget to do something else in this code here?

https://jsfiddle.net/gojh1pyt/

.ratio-keeper::before,
.ratio-keeper::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background: #B76BF0;
}

https://jsfiddle.net/rqezmwdb/

.panel{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background: #B76BF0;
}
9

Why are you using both before and after?

That’s like adding two panel divs at the same time. You only need one of them for your example.

The rules would be the same as you had for your panel div apart from using the content property.

I would also make sure it’s placed at top:0 and left:0 rather than leaving it to chance.

I can’t test your fiddle as they don’t work on mobile unlike codepen. I’ll be back on the computer late tomorrow.

11

Remove the :before as you are animating the :after element but the before element is still there covering the background.

.ratio-keeper::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background: #B76BF0;
}

.container .ratio-keeper::after {
  transform: translateY(0%);
  animation: curtainUp 8s ease-in forwards;
  animation-delay: 3s;
}
1 Like
12

Got it: https://jsfiddle.net/Lb3en7zj/

1 Like