Wappen in per CSS animiertem Bild einfügen

1. offizieller Beitrag

    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:



    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

    Einmal editiert, zuletzt von Kurtus (1. Juli 2018 um 20:18)

    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

    Hallo Basti,

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

    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

    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

    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.

    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

    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

    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