Zum Inhalt springen

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


Empfohlene Beiträge

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 von Kickflip
Link zu diesem Kommentar
Auf anderen Seiten teilen

  • 5 Monate später...

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;   

 

Link zu diesem Kommentar
Auf anderen Seiten teilen

  • 2 Monate später...

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.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...