Mehrere Div-Elemente durch Hover un/sichtbar machen?

Guten Tag,

ich möchte gerne 2 Div-Elemente übereinander haben, mit seperaten Inhalten. Das "untere" Div-Element soll allerdings erst erscheinbar sein, wenn die Maus über das darüber liegende Div-Element gehalten wird.

Vor 2 Jahren hatte ich das Prinzip schonmal verwendet, jedoch weiß ich leider nicht mehr wie ich es damals genau gemacht habe.

Dort hatte ich jedoch im oberen Div ein Bild, und wenn man die Maus drauf gehalten hat, wurde ein Text angezeigt.

Ich kann leider nicht mit 'position: ...' arbeiten, daher fällt der z-index leider weg. (Wurde damals von mir aber zu 100% nicht verwendet)

Aktuell sieht der css-Part so aus:

.hauptbox{
min-height: 200px;
min-width: 200px;
max-height: 200px;
max-width: 200px;
background-color: #820e57;
float: left;
}

.zweitbox{
min-height: 200px;
min-width: 200px;
max-height: 200px;
max-width: 200px;
background-color: #fff;
}

.zweitbox:hover{
min-height: 200px;
min-width: 200px;
max-height: 200px;
max-width: 200px;
opacity: 0.0;
}

das passende html dazu:

<div class="hauptbox">
<div class="zweitbox">

</div>
</div>

In der Theorie funktioniert das bisher ganz gut. Jedoch wird die zweite Box automatisch nach unten geschoben, sobald in der Hauptbox etwas steht.

Mit Margin und Padding konnte ich das bisher nicht lösen...

Es wäre toll wenn jemand weiß wie ich das ohne Script und z-index hinkriegen könnte.

Auf Bedarf kann ich den Link zur Test-Seite gerne teilen, damit man das ganze "live" sehen kann. (Um auch zu verstehen, wieso genau ich kein 'position' und z-index anwenden kann)

Mit freundlichen Grüßen

Alex

Sowohl Bilder, als auch Texte.

Ich habe auf meiner Website mehrere solcher Elemente, die dann unterschiedliche Inhalte bekommen.

Ich hoffe du findest etwas, das mir helfen kann.

Ich kann leider nicht mit position:absolute arbeiten, da die komplette Seite dann verstellt wird

https://codepen.io/anon/pen/yEdYVR

Hier ist der Aufbau der Webseite.

Wie man dort sieht möchte ich das über dem dunkel lilanen Div ein anderes div liegt.

Im weißen Div kann dann ein Icon, Bild oder Text sein, genauso wie in dem darunter.

Theoretisch könnte ich anstatt Hintergrundfarben direkt Bilder setzen, dann kann ich ohne Probleme alles per :hover lösen, jedoch wird wenn ich Text einfüge, der "innere" div nach unten geschoben. (Per Margin und Padding nicht behebbar)

Ich denke mal, wenn ich statt divs alles als Tabelle mache, dass ich dann alles mit position:absolute lösen könnte, aber das ist für mich leider keine Alternative.

Wäre es eventuell möglich, wenn ich statt float-left, die divs per padding zuordne, das ich dann mit position:absolute und z-index arbeiten könnte?

Geplant war es ohne JavaScript zu verwirklichen. Ich hatte das ganze vor circa 2 Jahren ja schonmal irgendwie hinbekommen, die Frage ist nur wie..

So, ich habe jetzt einfach mal alles neu geschrieben und auf Absolute Werte gesetzt. (vorher mit float-left, jetzt mit margin&padding)

Ist etwas mehr programmier Aufwand, aber letztendlich funktioniert es doch

Ein kleines Problem war nur, das wenn ich die obere Ebene (z-index:2) durchs hovern eine opacity von 0 gebe, das die Ebene darunter nicht anklickbar war (-> Obere Ebene immer noch oben)

Wenn ich der Ebene durch das hovern allerdings einen z-index von 0 gebe, und die darunter einen z-index von 1 hat, dann ist es theoretisch fertig, jedoch wird die Eben beim Bewegen der Maus wieder zurück gesetzt (flackert sehr schön...)

Konnte ich durch ein zweites hover bei der Ebene 1 lösen, indem ich den z-index:1 durchs hovern auf 3 gesetzt habe (-> Ebene 2 wird gehovert -> Wird auf Ebene 0 gesetzt -> Ebene 1 wird gehovert -> Wird auf Ebene 3 gesetzt -> perfektes Ergebnis)

Nochmal vielen Dank für die Hilfe basti1012