Zeigen Sie <div> oder <span> über dem Bild an: Bewegen Sie den Mauszeiger über das Bild

Ich bin auf der Suche nach einer Methode, die einediv oderspan Element, das über einem Bild angezeigt wird, wenn Sie:hover über diesem Bild. Ich kann das mit der.image:hover ~ .overlay, aber es ist nicht genau das, wonach ich suche. Dasdiv oderspan Das Element muss die Abmessungen der Bilder annehmen, da es mehrere Größen geben wird.

Beispiel

<img width="200" height="200"/> würde es dir erlauben:hover wechselndiv oderspan Element ausdisplay: none zudisplay: block (Muss nicht unbedingt ein Block sein). Das Element, das von unsichtbar in sichtbar geändert wird, muss die Größe des Bilds automatisch erkennen und die Größe des Elements an diese Abmessungen anpassen (200 x 200). Ich könnte aber auch eine haben<img width="300" height="400"/> Dazu müsste das Element der Größe (300 x 400) entsprechen.

Ich suche auch nach einer super einfachen Möglichkeit, diese Elemente perfekt über den Bildern zu positionieren.

Hier ist mein Code-Stift um zu zeigen, was ich bisher habe.

Antworten auf die Frage(1)

Ihre Antwort auf die Frage