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

[Kickflip]

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

[pst0042]

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;   

 

[Crapz]

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