Kickflip Geschrieben 19. Januar 2020 Teilen Geschrieben 19. Januar 2020 (bearbeitet) Hi, ich habe eine div, in der ein Bild eingebettet ist und ich möchte, dass wenn ich über die div oder dem Bild mit der Maus "Hoover", dass ein Text in der Div sichtbar wird. Außerdem möchte ich das Bild generell vertikal und horizontal in der div zentrieren. Das klappt auch noch nicht so ganz. Wäre für Hilfe sehr dankbar! Das hier funktioniert, aber nicht so wie oben beschrieben: HTML: <div id="div_pic01"> <a href="www.google.de"> <img src="1.jpg" alt="alternativer_text"> </a> <p id="text_pic01">Angezeigter Text in der Mitte der div</p> </div> CSS: #div_pic01{ text-align: left; margin: 0 auto; overflow: hidden; border:0px solid black; width: 60%; height: 200px; min-width: 300px; } #div_pic01 a img{ width: 100%; position: relative; top: -100%; } #text_pic01{ position: relative; top: 50%; left:50%; visibility:hidden } #div_pic01:hover .text_pic01{ visibility:visible; } Bearbeitet 19. Januar 2020 von Kickflip Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
pst0042 Geschrieben 13. Juli 2020 Teilen Geschrieben 13. Juli 2020 Falls es dir jetzt noch was hilft, mir ist gerade zu deinem Einblenden etwas aufgefallen. Zum einen hast du im CSS-Teil beim Hover "text_pic01" als Klasse aufgerufen, aber oben als ID/Element erstellt. Wenn du anstatt dem Punkt ein Hashtag verwendest, bist du schonmal einen Schritt weiter. Außerdem würde ich die Position vom Text absolute setzen, damit sie auch das Bild verdecken kann und die des div auf relative. Hier noch mein CSS-Teil, mit dem es bei mir geht. #div_pic01{ text-align: center; position: relative; margin: 0 auto; overflow: hidden; border:0px solid black; width: 60%; height: 200px; min-width: 300px; } #div_pic01 a img{ width: 100%; position: relative; top: -100%; } #text_pic01{ position: absolute; top: 50%; left:50%; visibility:hidden; } #div_pic01:hover #text_pic01{ visibility:visible; Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
Crapz Geschrieben 28. September 2020 Teilen Geschrieben 28. September 2020 (bearbeitet) Grüße, ich würde dir mal empfehlen, dich über sogenannte Pseudo-Klassen zu informieren, im genaueren :hover. Edit: Wenn ich mir deinen Code so anschaue, solltest du vllt. Selectors im Genaueren auch mal studieren. Bearbeitet 28. September 2020 von Crapz Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
Empfohlene Beiträge
Dein Kommentar
Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.