Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Text erscheinen lassen beim Bild hovern
#5
Die meisten Browser bieten sowas an. Du gehst aud der Seite und machst einen rechtsklick mit der Maus.Dann steht da Quelltext anzeigen. Oder du musst mal in dein Browser Menü kucken dann steht das da auch irgendwo.

Aber ich schreib dir den mal Trotzdem
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<style>
div,img{
 position:relative;
 left:calc(50% - 250px);
 text-align:center;
 width:500px;
 height:600px;

}
span{
 position:absolute;
 text-align:center;
 top:0px;
 left:0;
 border:2px solid black;
  margin:0;
 padding:20px 10px 0 10px;
 width:calc(100% - 20px);
 height:calc(100% - 10px);
 color:white;
 font-size:25px;
 background:rgba(0,0,0,0.0);
 transition:all 500ms;
 opacity:0;
 text-align:center;
}
span:hover{
 position:absolute;
 text-align:center;
 display:inline;
 z-index:2;
 top:0px;
 left:0;
 border:2px solid black;
  margin:0;
 padding:20px 10px 0 10px;
 width:calc(100% - 20px);
 height:calc(100% - 10px);
 background:rgba(0,0,0,0.5);
 transition:all 500ms;
 opacity:1;
}
</style>
<div>
 <img src="http://sebastian1012.bplaced.net/bilder/homer.jpeg" alt="Trulli">
 <span>Jede Menge Text den man hier  schreiben kann</span>
</div>


Ich schreibe aber mal in Laufe des Tages noch andere möglichkeiten wie man das machen kann ,weil da gibt es auch noch bessere möglichkeiten
Zitieren


Nachrichten in diesem Thema
RE: Text erscheinen lassen beim Bild hovern - von admin - 18.04.2022, 00:37

Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste