Element-Höhe in Verbindung mit position und top

[jemand anders]

Hi,

JSFiddle

Vielleicht hat jemand eine Idee: Alle vier Bilder rechts und die Buttons sollen nebeneinander angezeigt werden. Es geht darum den roten Bereich wegzubekommen, d. h. div-Höhe soll gleich img-Höhe sein. Die Hover-Funktionalität mit dem Versatz soll natürlich erhalten bleiben. Sie ist zu sehen, wenn die Maus über einem Bild ist.

Gruß

 

[Sempervivum]

Von einem roten Bereich sehe ich da nichts, aber dass die div-Höhe nicht gleich der img-Höhe ist, liegt daran, dass Du die Buttons und die Texte mit relativer Positionierung verschoben hast. Dabei nehmen sie an der ursprünglichen Position Raum ein. Um das zu vermeiden, musst Du sie absolut positionieren.
Dann bleibt unten noch ein kleiner freier Raum, der dadurch entsteht, dass der Defaultwert für vertical align baseline ist. Der freie Raum verschwindet, wenn Du vertical-align auf top setzt.
Außerdem werden die Divs mit den Bildern nicht zuverlässig nebeneinander angeordnet. Verwende Flexlayout dafür, indem Du für div.div1 display:flex setzt. Dann brauchst Du auch die Breite nicht mehr zu berechnen.

 

[jemand anders]

Wenn ich relative in absolute ändere, wird nur noch ein Button angezeigt.

 

[Sempervivum]

Da habe ich auch nicht dran gedacht und es auch nicht getestet: Die Buttons und die Texte liegen ja dann übereinander. Du kannst es jedoch beheben, indem Du die Buttons und die Texte jeweils in einen Container legst und diesen absolut positionierst und hor. zentrierst:
Edit fiddle - JSFiddle

 

[jemand anders]

CSS Flexbox-Kenntnisse vorausgesetzt. Das war es! Merci.