Wunderschönen Guten Morgen! Ich hab ein Effekt gefunden, dass ich unglaublich gern für mein Profil verwenden würde, leider hab ich so gar keine Ahnung wie das Ganze funktioniert und wollte euch hier nun fragen ob ihr mir vielleicht helfen könnt! Der folgende Code sollte aus zwei Teilen bestehen, den Oberen (in dem ein langer text stehen soll ) und den Unteren( ein weiterer Text mit kleinen Bildern) Ich hatte für beide Teilen den selben Code verwendet, doch nun wo ich den 'background' einfügen wollte, funktioniert das Obere nur wenn ich für den unteren Teil ein background reinstelle (und dann erscheint für Beide Teile das selbe Bild) oder wenn ich den unteren Teil ganz lösche Könntet ihr mir vielleicht helfen, wie ich für beide Teile verschiedene Bilder (backgrounds) reinstellen könnte?
1 2 3 4 5 6 7 8 9 10 11 12 13
<div><center><link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <style type="text/css"><h1><script>/*CONTENT-CONTAINER*/ #wfa .image { width: 700px; height: 700px; margin: 0 auto;<script> background: url('//files.homepagemodules.de/b647858/a_303_ca0eb2aa.png')</script>; position: relative; } /**/ #wfa .image-hover:hover {background-color: rgba(40,37,30,.9); transition: 0.4s; opacity: 1;} /**/ #wfa .image-hover {opacity: 0; height: 700px; transition: 0.7s; } /**/ #wfa .content { width: 660px; height: 620px; padding: 40px; font-family: Roboto; text-align: justify; color: white; font-size: 11px; line-height: 20px; overflow-y: scroll;} /*FORMATION*/ #wfa*/ #wfa i {color: white;} /**/ #wfa u {color: white;} /**/ #wfa b {color: white;} /**/ #wfa s {color: white;} /**/ #wfa .border { margin: 5px auto; width: 650px; border-center: 1px solid rgba(0,0,0,.5);} /**/ #wfa .character /**/ #wfa .characterfacts { width: 160px; height: 185px; border-center: 1px solid rgba(250,250,250,.6); } /**/ #wfa .name { text-transform: uppercase; letter-spacing: 1.5px; font-family: Roboto; font-size: 22px;}/**/ #wfa .info {font-size: 8px; font-weight: bold; font-family: Roboto; text-transform: uppercase; letter-spacing: 1px; color: white; padding-bottom: 5px; } /**/</style><br><br><div id="wfa"><div class="image"><div class="image-hover"><div class="content"><br><div class="stylesheet"><br> <span style="font-size:8pt">Grundlage der Handlungen sind vor allem zwei Memoiren von Kriegsveteranen des Pazifikkrieges. „With the Old Breed: At Peleliu and Okinawa“ von Eugene Sledge und „Helmet for My Pillow“ von Robert Leckie konfrontierte die Produzenten mit kriegsnahen Erlebnissen.[7] Daneben stützt sich die Handlung auf „China Marine“,[8] ebenfalls von Sledge, sowie Red Blood, Black Sand,[9] den Erinnerungen von Chuck Tatum, der neben John Basilone in der Schlacht um Iwojima kämpfte.[10] Umrahmt werden diese autobiographischen Elemente von geschichtsträchtigen Ereignissen, so etwa den Schlachten um Guadalcanal, Peleliu, Okinawa und Iwojima. Der Fokus liegt dabei immer auf relativ wenigen Einzelschicksalen innerhalb einer Gruppe von Marines. Es wird ein dreckiges, realistisches Bild des Krieges gezeichnet und welche Auswirkungen er auf die Soldaten hat. Insbesondere durch den Fanatismus der japanischen Soldaten werden die Marines zusehends hasserfüllter und verrohen immer mehr.
Die Kämpfe werden ebenso realistisch gezeigt. Statt actionreicher Nahkämpfe gibt es eher unpersönliche Gefechte auf lange Distanz, wobei erheblich mehr Zeit außerhalb der Kämpfe verbracht wird</span></justfy></div> </i></center> </span><br><br><br></div><div></div></div></div> </div><br><br><br></div><div></div></div></div><div class="border"></div></div></center>
Hilfe mit Hover Code - Texteffekt beim Bild-Mouseover Aktualisiert 20.02.18
Hallo Ana, besser ist es, das Script übersichtlicher aufzulisten, um Fehler zu erkennen.
Schöner Effekt! Beim Bild-Mouseover wird ein Text über das Bild geschoben. Super!
Habe das Skript erneut minimiert und den Google Schrift-Import erstmal weggelassen!
Jetzt ist es möglich unterschiedliche Höhen und Breiten einzugeben und das für jedes Bild nur einmal!
Wenn Du mehrere Bilder mit dem Effekt ausstatten willst, braucht nur die "class" ".image..." hochgezählt zu werden, wie in Zeile 2-4 zu sehen ist.
Höhe und Breite wird für das jeweilige Bild in Zeile 2-4 eingegeben!
Will man das Durchscheinen beim "Mouseover" des Bildes verändern, kann das in Zeile 5 mit "background-color" und den letzten Wert eingestellt werden (0.1 bis 1.0)!
Es ist auch möglich die Sichtbarkeit der Schrift zu verändern. Hierzu muss in Zeile 5 der Wert von "opacity" angepasst werden (1 bis 0.1)!
In Zeile 5 veranlasst "height: inherit" die komplette Abdeckung des Bildes beim Mouseover. Lässt man den Befehl weg, ergibt sich ein zusätzlicher, doch interessanter Effekt. Das Bild wird jetzt in Abhängigkeit der Textlänge abgedeckt!
In Zeile 7 kann beliebig der Text formatiert werden, ohne den Effekt zu stören!
Eine Besonderheit stellt die Option "cover" für "background-size" in Zeile 2-4 da. Das Bild wird durch diese Option bei unterschiedliche Höhen und Breiten nicht verzerrt!
Relative gut geeignet ist auch "background-size: 100%"!
<div class="content"> Meistens sind die Technischen Daten eines Modernen Transistor Verstärker weit aus besser, als die eines Röhrenverstärker. Doch die Entwicklung eines Röhrenverstärkers ist auch nicht stehen geblieben. So gibt es heute neue Konzepte, auch wurden neue Röhren entwickelt. Manch ältere Typen wurden neu modifiziert. Das Kern Material für Ausgangsübertrager ist heute von der Belastbarkeit besser. So sind die Übertrager bei gleichen Daten kleiner geworden. Das Kernmaterial (Ferrit) erzeugt eine höhere Induktivität im Gegensatz zu den ersten Übertragern, die auf den Markt kamen. Trotz einiger Nachteile sind moderne Röhrenverstärker, was den Klangeigenschaften angeht, nicht von schlechten Eltern. So wird oft empfunden, dass die Röhre weicher klingt. Auch sieht ein Röhrenverstärker optisch schöner aus. Es gibt viele Endstufenröhren auf den Markt, die man einsetzen kann. So hat jede Röhre für sich eine eigene Charakteristik. </div>
<div class="content"> Der Internet Explorer hat eine bewegte Geschichte hinter sich. Microsoft hatte den Beginn des Web-Zeitalters verschlafen. Mitte der 1990er war der Netscape Navigator der mit Abstand führende Browser. Erst 1995 wurde die erste Version des Internet Explorer veröffentlicht. Doch innerhalb weniger Jahre setzte sich der Microsoft-Browser an die Spitze - vor allem, weil er in jeder Version von Windows eingebaut war. </div>
<div class="content"> Laut Statistik werden immer noch ältere Browser, wie z.B. der Internet Explorer 7 oder sogar auch der Internet Explorer 6 genutzt! </div>
Hilfe mit Hover Code - Texteffekt beim Bild-Mouseover
Hallo Ana, habe das Script nochmal überarbeitet und minimiert!
• Jetzt ist es möglich ohne Schwierigkeiten unterschiedliche Höhen und Breiten einzugeben und das für jedes Bild nur einmal! • Das Bild kann nach wie vor komplett oder in Abhängigkeit der Textlänge abgedeckt werden! • Der Text kann jetzt beliebig formatiert werden, ohne den Effekt zu stören! • Info! Das Durchscheinen des Bildes beim "Mouseover" und die Sichtbarkeit der Schrift kann verändern werden ! • Alles ist in Beitrag #2 beschrieben und geändert!
Der Treffpunkt für Hilfe, Tricks & Tipps
»
XOBOR-Foren und Homepages
»
Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten!
»
Hilfe mit Hover Code
17.02.2018 11:10 (zuletzt bearbeitet: 03.02.2019 15:29)
Foren Spende
Direkt zu PayPal
Thema drucken
Antworten
