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.

#blend { position: relative }




#blend img#top:hover { opacity:0 }




#blend img { position: absolute;
	top: 0; left: 0; opacity: 1;	
	transition: opacity 0.5s
}

<div id="blend">
        	<img src="<?php echo $size3; ?>"  />
        	<img id="top" src="<?php echo $size4; ?>"  />
</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.

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

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.

Ich habe nun dein vorschlag durchgeführt:

#blend { position: relative }




#blend img#top:hover { opacity:0 }




#blend img#top { position: absolute;
	top: 0; left: 0; opacity: 1;	
	transition: opacity 0.5s
}

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

Ich bin gerade wirklich verwirrt .
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