CSS Bilder überlappen hover transition

  • Schön guten Morgen alle samt.
    Ich habe ein Problem und komme derzeit einfach nicht zur gewünschten Lösung.


    Ich möchte und habe zwei bilder übereinander und wenn man mit der maus drüber fährt dann soll das erste ausblenden.
    Hier bei dem Link zu sehen ganz unten : https://www.mediaevent.de/css/transition.html ist ein beispiel.



    PHP
    1. <div id="blend">
    2. <img src="<?php echo $size3; ?>" />
    3. <img id="top" src="<?php echo $size4; ?>" />
    4. </div>


    Das Problem ist nicht das es nicht angezeigt wird damit ist alles ok.
    Es funktioniert super, auch der fade effekt.


    Das PROBLEM ist das folgende:
    Wenn ich dann ein z.B. <p>hallo</p> unter dem letzten div schreibe befindet sich dieser Text hinter dem Bild.
    Somit wird das bild größer dargestellt als der Ramen oder wie?
    Wenn ich dem div eine height größe mitgebe dann kann ich den text auch unterhalb sehen.
    Nur muss das dynamisch sein und darf nicht statisch sein.
    Mit % werten, bezogen auf höhe und breite, habe ich es auch schon versucht, ich bin langsam verzweifelt.
    Könnt ihr mir helfen?


    Besten Dank im voraus.

  • Offenbar ist das eingeblendete Bild größer als das Basisbild. Ist es absolut positioniert, passt sich der Container nicht an.
    Lösung 1: Ändere das eingeblendete Bild, so dass es die selbe Größe hat.
    Wenn das nicht möglich ist, fällt mir nur noch ein, die Größe des Containers per Javascript an das Bild anzupassen.

  • Hi,


    die position bzw. das bild ist wie im code beschrieben (position: absolute;) absolut.
    Wie muss ich das denn ändern so das sich der Div container dazu anpasst?


    Javascript will ich ansich nicht anfassen, ich möchte lediglich CSS benutzen.


    Gruß Shidima

  • Wenn Du ein Einblenden haben willst, kommst Du nicht daran vorbei, das zweite Bild absolut zu positionieren.
    Bist Du meinem Hinweis bzgl. Änderung der Größe des zweiten Bildes nachgegangen?

    Zitat

    Ändere das eingeblendete Bild, so dass es die selbe Größe hat.

  • Das hatte ich schonmal ausprobiert. Das Problem dabei war das, dass bild dann viel zu klein Angezeigt wurde.
    Ich will eben das sich das Feld dynamisch eben dem Bild anpasst.


    Das funktioniert auch wunderbar wenn ich nur ein Bild anzeige. Aber sobald ich eben diesen kram einbinde klappt es eben nicht mehr.


    Wenn mehr informationen zu dieser Problemlösung gebraucht werden sollte, fragt bitte danach...


    Ich meine, das hier ist ja die Seite: html-Seminar.... Da sollte ja jemand kenntniss über so eine einfache CSS einbindung haben oder ist es doch so wie ich mir es schon die ganze zeit denke das CSS einfach eine frickelei darstellt und niemand ein konkreten Plan hat.


    Sorry bin gerade von dem Problem echt genervt -.- nicht eure schuld, ich bin eben unfähig :(

  • Eigentlich ist es doch recht einfach was ich haben will.
    Code habe ich gepostet genauso wie die schilderung des problems.
    versucht es doch einfach selbst, dann seht ihr das problem, falls ihr denn helfen wollt.

  • Zitat

    versucht es doch einfach selbst

    Dazu würden wir die Bilder brauchen. Sind die irgend wo online? Sind die gleich groß?


    Ich sehe, dass Du beide Bilder absolut positionierst. Das ist wahrscheinlich der Grund für das Verhalten. Ändere dein CSS so:

    CSS
    1. #blend { position: relative }#blend img#top:hover { opacity:0 }
    2. #blend img#top { position: absolute;
    3. top: 0; left: 0; opacity: 1;
    4. transition: opacity 0.5s }



    Wenn es dann nicht funktioniert, stelle die Bilder zur Verfügung bzw. der URLs, damit man es testen kann.

  • Ich habe nun dein vorschlag durchgeführt:



    resultat war das die beiden bilder nun untereinander gezeigt werden. Die größe ist allerdings richtig :). Aber eben noch nicht das ergebnis was ich haben möchte.


    Die Bilder kann ich hier aus rechtlichen Gründen nciht posten.
    Allerdings kann ich die maße nennen 224px x 336px


    Hier ist ein link der genügend beispiele liefert:
    https://www.google.de/search?q=bilder+224+x+336&client=firefox-b-ab&biw=1920&bih=971&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjwor_V3P7RAhWGVywKHdznDmkQ_AUIBigB
    Im endeffekt will ich eben zwei davon anzeigen aber eben übereinander und das das erste mit einem mouse hover ausblendet.
    Ansich ganz einfach, nur eben nicht für mich :S

  • Ich bin gerade wirklich verwirrt :rolleyes: .
    Es geht auf einmal, ich habe keine ahnung was davor falsch war. Irgendwie war wohl ein minimaler tippfehler drin. Kein Plan. Ich war anscheind ein wenig blind bei der stelle des codes -.-
    Herzlichen Dank für Deine Mühe. Problem solved :)