ibiza ibiza - 4 months ago 17
CSS Question

How to add a centered div that fades-in from the top over my content?

This is my basic HTML structure:

<body>
<div class="fadeInDown">
I want this to appear centered, from the top and over all my content
</div>

<div id='content'>
...much complex html layout...bootstrap...react...wow
</div>
</body>


I would like my fadeInDown div to appear kind of like that: https://fabriceleven.com/dev/quickly-add-css-fade-in-animations/ (the "Going down" example)

How do I achieve to center a div on top and over everything else?

Answer

It shows you how to achieve this in the link that you included

.on-top {
  position: absolute;
  width: 100%;
  text-align: center;
}
.animate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
<body>
  <div class="on-top animate fadeInDown">
    I want this to appear centered, from the top and over all my content
  </div>

  <div id='content'>
    ...much complex html layout...bootstrap...wow
  </div>
</body>