Overlay mit Collections einzoomen
Posted: Sun 21. Jan 2024, 18:45
Hallo Gemeinde,
ich habe ein Video, das ich als Overlay mit
in meine Seite einbinde.
Dem Overlay habe ich meinen 'Style' aufgedrückt
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
eingefügt und in 'stylsheet.css' zusätzlich allgemein noch
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
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');}}}
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 */
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! */
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)}
}
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