Wappen in per CSS animiertem Bild einfügen

  • 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
    1. <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
    1. <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.cs24…-ueber-uns/das-praesidium

    Wenn ich im CSS-Code an dieser Stelle:


    Code
    1. 100% {
    2. -webkit-transform: scale(0.8) translateX(150%);
    3. transform: scale(0.8) translateX(150%);
    4. opacity: 0.5;
    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.n…-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

  • Ich habe mir mal das original Script angekuckt.Habe dann nochmal was geändert und ich denke das es so besser passt https://codepen.io/basti1012/pen/OEdwJB


    Dein problem wahr ,das 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 drinne hattest. Deswegen mußte man da noch was dran ändern das beim hovern nur der nachfolgene img verschwindet und nicht alle nachfolger. Meine erklärungen sind Mist ich weiß,aber wenn du mal etwas rum spielst an deinen Code wirst du vieleicht 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 ausversehen überschrieben ,also uberspeichert.
    Hier nochmal https://codepen.io/basti1012/pen/OEdwJB aber jetzt richtig.




    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
    1. margin: 10px 1%;
    2. min-width: 230px;
    3. max-width: 315px;
    4. max-height: 230px;
    5. width: 100%;


    Bei Dir sieht es so aus:


    Code
    1. margin: 10px 1%;
    2. width: 285px;
    3. 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