CSS Animation transform / maximale Größe

[admin]

Moin moin,

ich versuche mich gerade an einem Ken Burns Effekt via CSS. Dabei soll ein Hintergrundbild eines DIVs zeitgesteuert leicht gezoomt und gescrollt werden.

Das funktioniert auch mittels

@keyframes kenburns {
    0% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    95% {
        transform: scale3d(1.2, 1.2, 1.2) translate3d(-10px, -10px, 0px);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    100% {
        transform: scale3d(1.5, 1.5, 1.5) translate3d(-10px, -10px, 0px);
        opacity: 0;
    }
}

#imageContainer  {
  animation: kenburns 50s infinite;
}

Allerdings: Dabei wird jetzt das DIV größer, obwohl ich eine max-height angegeben habe. Es legt sich dann über die darunter (im Sinne vertikal) folgenden Divs drüber. Auch ein z-index hat mir nix gebracht.

Hat jemand eine Idee wie ich diese Animation auf den Hintergrund beschränken kann?

Live-Beispiel: https://www.cruisewatch.net/

Danke für alle Tipps!

 

[SpiceLab]

Auch ein z-index hat mir nix gebracht.

Mit z-index:-1 anstelle von z-index:0 sieht's gleich ganz anders aus

[edit]Satz am Ende vervollständigt[/edit]​

 

[admin]

Stimmt.

Aber warum eigentlich? Vorher war das Bilder-Div z-index:0 und der Text z-index: 10. Da müsste doch der Text über dem Bild sein und nicht das Bild über dem Text?

Aber trotzdem danke für die Lösung!

 

[admin]

Bin übrigens noch nicht 100% glücklich. Das DIV wandert immer noch ein Stück rechts raus in dem es größer wird. Ich hatte ihm eigentlich ein overflow: hidden; gegeben und es eben auch nochmal mit einer max-width probiert, aber es wird definitiv größer.

[Update]
overflow: hidden; auf dem Parent Container hat es gefixt.