HTML/CSS: Text in div beim herüberfahren anzeigen

Veröffentlicht 19. Januar 20205 j

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 20205 j von Kickflip

5 Monate später...

13. Juli 20205 j

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;