Javascript-forum › Entwicklung › Javascript › Text erscheinen lassen beim Bild hovern
Antwort schreiben

Neue Antwort schreiben
Antworten zu Thema: Text erscheinen lassen beim Bild hovern
Benutzername:
Betreff:
Beitrags-Icon:
Ihre Nachricht:
Smilies
Smile Wink Cool Big Grin
Tongue Rolleyes Shy Sad
At Angel Angry Blush
Confused Dodgy Exclamation Heart
Huh Idea Sleepy Undecided
[mehr]
 
X
Beitragsoptionen:
Themen Abonnement:
Geben Sie die Art der E-Mail-Benachrichtigung und des Abonnements für dieses Thema an (nur registrierte Benutzer).





Themenübersicht (Neueste zuerst)
Geschrieben von admin - 18.04.2022, 00:38
[quote pid='14' dateline='1529066412']
Und könntest du mir vlt den Quellcode schicken?
[/quote]

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
<!DOCTYPE html>
<html lang="de">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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
Geschrieben von admin - 18.04.2022, 00:37
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
<!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
Geschrieben von admin - 18.04.2022, 00:37
Und könntest du mir vlt den Quellcode schicken?
Geschrieben von admin - 18.04.2022, 00:37
Ja . Wenn du im Quelltext kuckst steht da bei span:hover ja
  background:rgba(0,0,0,1);

Mach aus der letzten Zahl eine kleinere Zahl zb so
  background:rgba(0,0,0,0.5);

Somit kann man das Bild noch leicht sehen sehe Beispiel oben,habe es geändert
Geschrieben von admin - 18.04.2022, 00:37
Auf jedenfall schon mal vielen dank für die schnelle antwort!

So ist es schon sehr gut, geht es noch, dass man das bild noch leicht sieht?



LG Henry
Geschrieben von admin - 18.04.2022, 00:35
Da gibt es viele Möglichkeiten ," Container übereinander legen. Oder Klassen wechseln. Mit Javascript den Inhalt wechseln und viele mehr .
Ich habe es so gemacht 
**Link entfernt, weil Seite nicht mehr erreichbar **

Falls du eine andere Möglichkeit suchst oder noch haben willst,  ich poste die anderen Möglichkeiten gleich auch noch.
Soll das nur bei einem Bild sein oder bei mehreren?