overlay animation should not be shown outside the underlying div

Question

here is my attempt to have overlay animation effect but overlay is not hiding after getting out of the underlying div- 'overflowTest'

#overflowTest {
  background: #ff0000;
  color: white;
  padding: 15px;
  width: 150px;
  height: 100px;
  overflow: hidden;
  text-shadow: 6px 6px 5px black;
}

#box{
position: absolute;
width: 60px;
height: 60px;
border: 5px solid black;
animation-name: go;
animation-duration: 6s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
transform: rotate(45deg);
}

@keyframes go {
0%{
border: 3px solid red;
}
100%{
border: 3px solid red;
transform: translateX(200px);
}

}

<div id="overflowTest"><div id="box"></div><div id="hel">This is demo text to test overlay animation on it</div></div>

please help in hiding the overlay when it is outside the 'overflowTest' div

maersux · Accepted Answer · 2020-03-21T09:42:45.483

You need to add position: relative; to the parent #overflowTest.

An Element with position: absolute; will behave absolute to the first parent with a relative position. If no other is declared as relative, it will behave absolute to the page itself, which was happening before.

#overflowTest {
  position: relative;
  background: #ff0000;
  color: white;
  padding: 15px;
  width: 150px;
  height: 100px;
  overflow: hidden;
  text-shadow: 6px 6px 5px black;
}

#box{
  position: absolute;
  width: 60px;
  height: 60px;
  border: 5px solid black;
  animation-name: go;
  animation-duration: 6s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  transform: rotate(45deg);
}

@keyframes go {
  0%{
    border: 3px solid #ffaaaa;
  }
  100%{
    border: 3px solid #ffaaaa;
    transform: translateX(200px);
  }
}

<div id="overflowTest">
  <div id="box"></div>
  <div id="hel">This is demo text to test overlay animation on it</div>
</div>

Hope that is what you are looking for!

I have updated my Snippet. Is that what you are looking for? — maersux, Mar 21 '20 at 10:51

score 0 · Answer 2 · answered Mar 21 '20 at 09:15

The property you should use is z-index. Setting z-index:-1; will help you get the desired result. z-index works only when position property is also added. Try this,

#overflowTest {
  background: #ff0000;
  color: white;
  padding: 15px;
  width: 150px;
  height: 100px;
  overflow: hidden;
  text-shadow: 6px 6px 5px black;
  
}

#box{
position: absolute;
width: 60px;
height: 60px;
border: 5px solid black;
animation-name: go;
animation-duration: 6s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
transform: rotate(45deg);
z-index:-1;
}

@keyframes go {
0%{
border: 3px solid red;
}
100%{
border: 3px solid red;
transform: translateX(200px);
}

}

<div id="overflowTest"><div id="box"></div><div id="hel">This is demo text to test overlay animation on it</div></div>

Hope it helps.!! Happy Coding!!

Can you specify exactly what your need is? – Anglesvar Mar 21 '20 at 09:26 — Anglesvar, Mar 21 '20 at 09:26

overlay animation should not be shown outside the underlying div

2 Answers2