Overlay mit Collections einzoomen

[Gonzo Gates]

Hallo Gemeinde,

ich habe ein Video, das ich als Overlay mit

Code: Select all

{{{plugin:col_ovlFrame('gdai2','../userfiles/plugins/MultiMedia2/video/Green Day - American Idiot -Official Music Video.mp4','Green Day Video als Overlay2, funzt!','dor','150px');}}}

in meine Seite einbinde.

Dem Overlay habe ich meinen 'Style' aufgedrückt

Code: Select all

.col_ovl_dor {position: fixed; left: 50%; top: 12.5%; display: block; box-sizing: border-box; width: 800px; max-width: 100%; max-height: 80%; overflow: auto; background: #fff url(../images/bg-tiny.jpg); border: 5px solid rgba(119, 17, 00, 1); border-radius: 0 18px 18px 0; 
padding: 6px 0px 0px 0px; margin: 0 auto 0 -400px; z-index: 2;} /* DOR: z-index hinzugefuegt und schiebt das Overlay über die Header-Überschrift */

Da hatte ich gedacht, dass man das Overlay einzoomen könnte, so wie ich es mit 'shutter' bei meinen Darstellungen für 'Vorschaubild in groß' in meinen Seiten mache. Bei denen funktioniert allerding nur bedingt das Ausblenden, wenn man auf das 'X' in der oberen Leiste klickt nur bedingt, bis schlecht (Dazu gibt es schon eine Anfrage im Forom).

In '.col_ovl_dor' habe ich

Code: Select all

animation-name: zoom; /* DOR: hinzugefuegt Overlay soll von innen nach aussen eingeblendet werden und irgenwas spuckt mir in die Suppe, dass es nicht geht! */
animation-duration: 5.5s; /* DOR: hinzugefuegt und irgenwas spuckt mir in die Suppe, dass es nicht geht! */

eingefügt und in 'stylsheet.css' zusätzlich allgemein noch

Code: Select all

@keyframes zoom { /* DOR: Entnommen von Blindtexte_spielwiese_modal_popup_neu/css/modal_popup_blindtext.css, aber funzt hier nicht!!! */
  from {transform:scale(0)} to {transform:scale(1)}
}

Füge ich mein 'Einzoomen' hinzu, dann wird die Anzeige verfranzt, aber Video funktioniert beim Abspielen.

Wenn jemand eine Idee hat, wie es geht, dann her damit und dann vielleicht noch eine Idee mit 'animation-name: zoom_out;'

Referenz: http://dorilaraukft.bplaced.net/sites/C ... -Abteilung

Nachtrag: Wenn ihr in '.col_ovl_[mein_style]' '' 'background: ... url(../images/[meinBild].jpg)' hinzufügt, dann ändert 'background: ...' auch in '.col_ovl_[mein_style]In'.

Gruß
Gonzo