JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Auf Thema antworten

Beitrag: [QUOTE="Kurtus, post: 15063, member: 6167"] Hallo liebe Experten, ich bin leider kein Programmierer sondern nur ein "normaler" Nutzer mit einigen wenigen HTML-Kenntnissen. Für die Webseite unseres Vereins habe ich ein CSS-Snippet intergriert um die Ansicht der Vorstandschaft animiert zu gestalten. Die Ansicht klappt in Google Chrome und Microsoft Edge, allerdings nicht im Firefox. Hier ist die Animation verschoben. Live ist das ganze hier zu sehen: www . mcv-moemlingen . de / wir-ueber-uns / vorstandschaft[SIZE=3] (einen Link arf ich leider noch nicht einfügen, daher die Leerzeichen zwischen den Punkten und den Slashes)[/SIZE] Es wäre nett, wenn mir jemand weiterhelfen könnte, damit die Ansicht in Firefox gleich der in Edge und Chrome wird. Wie gesagt, ich bin absoluter Noob, daher seid mir für evtl. dumme Rückfragen nicht böse. Vielen Dank im Voraus. Kurt Hier die Screenshots und weiter unten die HTML und CSS-Datei Ansicht in Chrome und Edge: [ATTACH type="full" alt="Vorstandschaft_Edge_und_Chrome.JPG"]572[/ATTACH] bzw. bei Mouse over: [ATTACH type="full" alt="Vorstandschaft_Edge_und_Chrome_aktiv.JPG"]573[/ATTACH] So sieht es bei Firefox aus: [ATTACH type="full" alt="Vorstandschaft_Firefox.JPG"]574[/ATTACH] bzw. bei Mouse over: [ATTACH type="full" alt="Vorstandschaft_Firefox_aktiv.JPG"]575[/ATTACH] Ich nutze Joomla 4 als CMS. So sieht die HTML-Datei aus: [CODE]<div class="zentriert"> <h1 style="text-align: center;"><span style="font-size: 18pt;"><strong><span style="color: #4636f5;">Die engere Vorstandschaft des Mömlinger Carneval Vereins</span></strong></span></h1> <div class="zentriert"> <figure class="snip0067 red" data-wf-figure="1"><img src="images/vorstandschaft/helmut_gollas.jpg" alt="Helmut Gollas" /><figcaption> <h1>Helmut Gollas</h1> <p>Mir soin Fasching...</p> <div class="icons"> <div class="mein-tooltip"><i class="icon-home"></i><span class="tooltiptext">Kirchrainstraße 25 63853 Mömlingen</span></div> <div class="mein-tooltip"><i class="icon-envelope"></i><span class="tooltiptext">vorsitzender {at} mcv-moemlingen.de</span></div> <div class="mein-tooltip"><i class="icon-phone"></i><span class="tooltiptext">Telefon 0170-8914300 </span></div> </div> </figcaption> <div class="position">Vorsitzender</div> </figure> <figure class="snip0067 blue" data-wf-figure="1"><img src="images/vorstandschaft/Thomas_Hofmann.JPG" alt="Thomas Hofmann" /><figcaption> <h1>Thomas Hofmann</h1> <p>Fasching ist unser Leben...</p> <div class="icons"> <div class="mein-tooltip"><i class="icon-home"></i><span class="tooltiptext">Rhönstr. 1 63853 Mömlingen</span></div> <div class="mein-tooltip"><i class="icon-envelope"></i><span class="tooltiptext">praesident {at} mcv-moemlingen.de</span></div> <div class="mein-tooltip"><i class="icon-phone"></i><span class="tooltiptext">Telefon 06022/30407 </span></div> </div> </figcaption> <div class="position">Präsident</div> </figure> </div> <div class="zentriert"> <figure class="snip0067 yellow" data-wf-figure="1"><img src="images/vorstandschaft/Janine Jakob.JPG" alt="Janine Jakob" /><figcaption> <h1>Janine Jakob</h1> <p>Ohne Moos nix los...</p> <div class="icons"> <div class="mein-tooltip"><i class="icon-home"></i><span class="tooltiptext">Untere Kirchrainstr. 7 63853 Mömlingen</span></div> <div class="mein-tooltip"><i class="icon-envelope"></i><span class="tooltiptext">schatzmeister {at} mcv-moemlingen.de</span></div> <div class="mein-tooltip"><i class="icon-phone"></i><span class="tooltiptext">Telefon 0157-0402092 </span></div> </div> </figcaption> <div class="position">Schatzmeisterin</div> </figure> <figure class="snip0067 green" data-wf-figure="1"><img src="images/vorstandschaft/Christopher Kraus.JPG" alt="Christopher Kraus" /><figcaption> <h1>Christopher Kraus</h1> <p>Wer schreibt, der bleibt...</p> <div class="icons"> <div class="mein-tooltip"><i class="icon-home"></i><span class="tooltiptext">Obere Kirchrainstr. 10 63853 Mömlingen</span></div> <div class="mein-tooltip"><i class="icon-envelope"></i><span class="tooltiptext">schriftfuehrer {at} mcv-moemlingen.de</span></div> <div class="mein-tooltip"><i class="icon-phone"></i><span class="tooltiptext">Telefon 06022/681024 </span></div> </div> </figcaption> <div class="position">Schriftführer</div> </figure> </div> </div>[/CODE] und dies ist die CSS-Datei dazu: [CODE].snip1543 { background-color: #fff; color: #ffffff; display: inline-block; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; margin: 10px 5px; max-width: 315px; min-width: 230px; overflow: hidden; position: relative; text-align: left; width: 100%; -webkit-transform: translateZ(0); transform: translateZ(0); } .snip1543 *, .snip1543 *:before, .snip1543 *:after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.45s ease; transition: all 0.45s ease; } .snip1543 img { backface-visibility: hidden; max-width: 100%; vertical-align: top; } .snip1543:before, .snip1543:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; background-color: #4636f5; opacity: 0.5; -webkit-transition: all 0.45s ease; transition: all 0.45s ease; } .snip1543:before { -webkit-transform: skew(30deg) translateX(-80%); transform: skew(30deg) translateX(-80%); } .snip1543:after { -webkit-transform: skew(-30deg) translateX(-70%); transform: skew(-30deg) translateX(-70%); } .snip1543 figcaption { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 1; bottom: 0; padding: 25px 40% 25px 20px; } .snip1543 figcaption:before, .snip1543 figcaption:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #4636f5; box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); content: ''; opacity: 0.5; z-index: -1; } .snip1543 figcaption:before { -webkit-transform: skew(30deg) translateX(-100%); transform: skew(30deg) translateX(-100%); } .snip1543 figcaption:after { -webkit-transform: skew(-30deg) translateX(-90%); transform: skew(-30deg) translateX(-90%); } .snip1543 h3, .snip1543 p { margin: 0; opacity: 0; letter-spacing: 1px; } .snip1543 h3 { font-family: 'Teko', sans-serif; font-size: 36px; font-weight: 700; line-height: 1em; text-transform: uppercase; } .snip1543 p { font-size: 0.9em; } .snip1543 a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } .snip1543:hover h3, .snip1543.hover h3, .snip1543:hover p, .snip1543.hover p { -webkit-transform: translateY(0); transform: translateY(0); opacity: 0.9; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .snip1543:hover:before, .snip1543.hover:before { -webkit-transform: skew(30deg) translateX(-20%); transform: skew(30deg) translateX(-20%); -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } .snip1543:hover:after, .snip1543.hover:after { -webkit-transform: skew(-30deg) translateX(-10%); transform: skew(-30deg) translateX(-10%); } .snip1543:hover figcaption:before, .snip1543.hover figcaption:before { -webkit-transform: skew(30deg) translateX(-40%); transform: skew(30deg) translateX(-40%); -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .snip1543:hover figcaption:after, .snip1543.hover figcaption:after { -webkit-transform: skew(-30deg) translateX(-30%); transform: skew(-30deg) translateX(-30%); -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }[/CODE] [/QUOTE]

Authentifizierung