Wappen in per CSS animiertem Bild einfügen

Kurtus

Hallo,

ich habe mir von der Seite http://littlesnippets.net/ein Schnipsel geholt und möchte ihn bei mir auf der Seite einbinden.

Der CSS Code sieht wie folgt aus:

Code

[COLOR=#000000][FONT=verdana]figure.snip1455 {[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]font-family: 'Tahoma', Arial, sans-serif;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]position: relative;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]float: left;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]overflow: hidden;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]margin: 10px 1%;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]min-width: 230px;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]max-width: 315px;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]max-height: 230px;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]width: 100%;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]color: red;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]text-align: left;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]/*color: #ffffff;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]background-color: #07090c; */[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]background-color: #f89406;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]font-size: 16px;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]}[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]figure.snip1455 * {[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]-webkit-box-sizing: border-box;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]box-sizing: border-box;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]-webkit-transition: all 0.35s ease;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]transition: all 0.35s ease;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]}[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]figure.snip1455 img {[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]max-width: 100%;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]-webkit-transition-delay: 0.2s;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]transition-delay: 0.2s;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]backface-visibility: hidden;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]}[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]figure.snip1455 figcaption {[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]position: absolute;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]top: 50%;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]left: 0;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]width: 100%;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]-webkit-transform: scale(0.5) translate(0%, -50%);[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]transform: scale(0.5) translate(0%, -50%);[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]-webkit-transform-origin: 50% 0%;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]-ms-transform-origin: 50% 0%;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]transform-origin: 50% 0%;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]z-index: 1;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]opacity: 0;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]padding: 0 30px;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]}[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]figure.snip1455 h3,[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]figure.snip1455 p {[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]line-height: 1.5em;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]}[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]figure.snip1455 h3 {[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]margin: 0;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]font-weight: 800;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]text-transform: uppercase;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]}[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]figure.snip1455 p {[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]font-size: 0.8em;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]font-weight: 500;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]margin: 0 0 15px;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]}[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]figure.snip1455 .read-more {[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]border: 2px solid #ffffff;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]padding: 0.5em 1em;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]font-size: 0.8em;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]text-decoration: none;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]color: #ffffff;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]display: inline-block;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]}[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]figure.snip1455 .read-more:hover {[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]background-color: #ffffff;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]color: #000000;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]}[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]figure.snip1455:hover img,[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]figure.snip1455.hover img {[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]-webkit-animation: snip1455 0.45s linear forwards;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]animation: snip1455 0.45s linear forwards;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]-webkit-animation-iteration-count: 1;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]animation-iteration-count: 1;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]}[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]figure.snip1455:hover figcaption,[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]figure.snip1455.hover figcaption {[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]-webkit-transform: scale(1) translate(0, -50%);[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]transform: scale(1) translate(0, -50%);[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]opacity: 1;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]-webkit-transition-delay: 0.35s;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]transition-delay: 0.35s;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]}[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]@keyframes snip1455 {[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]50% {[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]-webkit-transform: scale(0.[/FONT][/COLOR]8)[COLOR=#000000][FONT=verdana] translateX(0%);[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]transform: scale(0.[/FONT][/COLOR]8)[COLOR=#000000][FONT=verdana] translateX(0%);[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]opacity: 0.5;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]}[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]100% {[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]-webkit-transform: scale(0.[/FONT][/COLOR]8)[COLOR=#000000][FONT=verdana] translateX(150%);[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]transform: scale(0.[/FONT][/COLOR]8)[COLOR=#000000][FONT=verdana] translateX(150%);[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]opacity: 0.5;[/FONT][/COLOR]
[COLOR=#000000][FONT=verdana]}
[/FONT][/COLOR][COLOR=#000000][FONT=verdana]}[/FONT][/COLOR]

Alles anzeigen

Dies ist der HTML-Code dazu:

HTML

<figure class="snip1455">  <img src="images/knr/personen/kermit_.jpg" alt="Günther Frieß" />  <figcaption>    <img src="images/knr/Mitglieder_2018/2018_KNR-MCV_rgb.png" alt="MCV" />    <h3>Günther Frieß</h3>    <p>Präsident<br />Kreisnarrenring Obernburg</p><a href="#" class="read-more">Kontakt</a>  </figcaption></figure><figure class="snip1455"><img src="images/knr/personen/kermit_.jpg" alt="Othmar Morczinczyk" />  <figcaption>    <img src="images/knr/Mitglieder_2018/2018_KNR-NCV_rgb.png" alt="NCV" />    <h3>Othmar Morczinczyk</h3>    <p>Vizepäsident<br />Kreisnarrenring Obernburg</p><a href="#" class="read-more">Kontakt</a>  </figcaption></figure><figure class="snip1455"><img src="images/knr/personen/kermit_.jpg" alt="Werner Schmitt" />  <figcaption>    <img src="images/knr/Mitglieder_2018/2018_KNR-MCV_rgb.png" alt="MCV" />    <h3>Werner Schmitt</h3>    <p>Schatzmeister<br />Kreisnarrenring Obernburg</p><a href="#" class="read-more">Kontakt</a>  </figcaption></figure>  <figure class="snip1455"><img src="images/knr/personen/kermit_.jpg" alt="Werner Schmitt" />  <figcaption>    <img src="images/knr/Mitglieder_2018/2018_KNR-HCV_rgb.png" alt="MCV" />    <h3>Christine Braun</h3>    <p>Schriftführerin<br />Kreisnarrenring Obernburg</p><a href="#" class="read-more">Kontakt</a>  </figcaption></figure>

Wobei die jeweiligen Zeilen

HTML

<img src="images/knr/Mitglieder_2018/2018_KNR-HCV_rgb.png" alt="MCV" />

von mir zusätzlich eigefügt wurden. Diese Bild sollte beim Mouse over oberhalb des Textes erscheinen.

Leider sieht man es beim mouse over nicht. Es erscheint kurz wenn man mit der Maus wieder heraus fährt.

Hier zu sehen: http://kreisnarrenring.de.cs249.fc-testdomain.de/index.php/wir-…/das-praesidium

Wenn ich im CSS-Code an dieser Stelle:

Code

100% {
    -webkit-transform: scale(0.8) translateX(150%);
    transform: scale(0.8) translateX(150%);
    opacity: 0.5;
  }

den Wert translateX auf 0% ändere, sieht man zwar das eingefügte image (Wappen) aber das Hintergrundfoto (Kermit) fährt nicht mehr nach rechts heraus und bleibt sichtbar.

Hier zu sehen: http://uebung.mcv-moemlingen.net/wir-ueber-uns/das-praesidium

Es sollte eigentlich so wie in der Originalversion sein, dass das Kermit-Foto nach rechts heraus fährt und dann das Wappen mit dem Namen und Kontakt-Button erscheint.

Das Umstellen des Wertes opacity bringt leider auch nichts.

Da ich in CSS noch nicht die große Ahnung habe, wollte ich fragen, ob mir auch hier jemand helfen könnte?

Vielen tausend Dank im Voraus!

Liebe Grüße
Kurt

basti1012

Da ich nicht genau weiß wie es aussehen soll habe ich das erstmal so gemacht. Trifft das ungefähr deinen Wunsch?
https://basti1012.bplaced.net/index.php?ordn…um-hilfe&id=657

basti1012

Ich habe mir mal das original Script angekuckt. Habe dann nochmal was geändert und ich denke das es so besser passt

https://basti1012.bplaced.net/index.php?ordn…um-hilfe&id=657

Dein Problem war ,dass beim Original Script die klasse figure img beim hovern das Bild verschwindet. Und zwar alle Bilder die nach figure kommen, auch das was du in figcaption drinnen hattest. Deswegen musste man da noch was dran ändern, dass beim hovern nur der nachfolgende img verschwindet und nicht alle Nachfolger. Meine Erklärungen sind Mist, ich weiß, aber wenn du mal etwas rumspielst an deinen Code wirst du vielleicht merken, was ich dann meine

Kurtus

Hallo Basti,

vielen lieben Dank, dass Du mir da so toll weiter hilfst.

Deine Erklärung habe ich übrigens gut verstanden, allerdings fehlt mir dazu die Lösung

Es klappt mit Deiner ersten Version sehr gut und hat auch meine Vorstellungen genau getroffen.
Allerdings würde ich mir auch gerne Deine zweite Version anschauen, diese funktioniert bei mir leider nicht.
Der Kermit ist in einem Kreis nur teilweise zu sehen und es passiert nicht beim mouse over....

Nochmals tausend Dank

LG
Kurt

Arne Drews

Sorry, aber was an dem Original von littlesnippets hast Du denn nicht verstanden, wenn Du bastis Beisiel verstehst?!
Das ist fast 1:1 das selbe, nur in CodePen gepostet.

Kurtus

Hi Arne,

ich habe seine Erklärung verstanden, dass nämlich alle Images die in der klasse figure eingeschlossen sind verschwinden.
Somit auch mein eingefügtes Bild. Das weiß ich aber erst jetzt nachdem Basti mir das erklärt hat, vorher wusste ich es beim Original Snippet noch nicht, deshalb hatte ich ja gefragt...

Wie und wo ich noch was ändern muss, damit beim hovern nur der nachfolgene img verschwindet, weiß ich allerdings immer noch nicht.
Also das Wissen um die Lösung des Problems fehlt mir als Anfänger.

LG
Kurt

basti1012

Sorry, ich habe die 2 Version aus Versehen überschrieben ,also uberspeichert.
Hier nochmal

https://basti1012.bplaced.net/index.php?ordn…um-hilfe&id=516

aber jetzt richtig.

Zitat von Kurtus

Wie und wo ich noch was ändern muss, damit beim hovern nur der nachfolgene img verschwindet, weiß ich allerdings immer noch nicht.
t

Da könntest du dir das mal ankucken https://wiki.selfhtml.org/wiki/CSS/Selektoren da ist das erklärt mit den Geschwister,Nachbar,Nachfolger Selektoren. Das wirst du immer wieder brauchen wenn du solche Sachen hast.

Kurtus

Hallo Basti,

vielen Dank,

jetzt ist es perfekt!

Danke für den Link zur Erläuterung der CSS-Selektoren. Ich werde mir das mal anschauen und hoffe ich kapiere es auch

Du hast außer diesen "2 kleinen Änderungen" auch noch hier was verändert:

Code

margin: 10px 1%;
min-width: 230px;
max-width: 315px;
max-height: 230px;
width: 100%;

Bei Dir sieht es so aus:

Code

margin: 10px 1%;
 width: 285px;
 height: 350px;

Ist diese feste Größenangabe erforderlich?

LG
Kurt

basti1012

Nee die mußt du dir selber anpassen.Hatte die am anfang erst geändert weil ich den Frosch da Perfekt rein haben wollte. die min und max angaben finde ich eigentlich in diesen Fall sowieso unbrauchbar.Nur das sind sachen die mußt du an besten selber rausfinden. Die Min und max Angaben brauch man zb bei wechselnden Inhalt,der mal größer und mal kleiner ist.Wie ich das bei dir jetzt sehe brauchst du das eigentlich nicht. Du solltest dir dann nur die endgröße Anpassen ,wie groß das insgesamt sein soll und später wenn du den Frosch austauschen tust ,mußt du das neue Bild da nur noch anpassen. Da kannst du dich ja notfalls nochmal melden wenn es soweit ist.

Du kannst aber die min und max Angaben auch so stehen lassen wie sie sind. Mußt dann wahrscheinlich nur die Bilder verkleinern. Wie gesagt ,das mußt du selber ausprobieren und am besten mit den Bildern die da zum Schluß rein kommen. Wie du sehen kannst ist dein Wappen auch kleiner als das Original Wapenbild. Weil es wäre sonst zu groß gewesen und es hätte ein Stück gefehlt

Kurtus

Hallo Basti,

ich denke das mit der Bildgröße werde ich hinbekommen.
Ich bedanke mich noch einmal recht herzlich für Deine Unterstützung!

LG
Kurt

Tags