Infobox bei Image hover

Opa_Schlumpf · 4. Mai 2012, 22:24

Guten Tag...

Ich weis nicht ob dies Möglich ist aber ich habe folgendes Problem:
Derzeit arbeite ich an meiner Login-Box und da habe ich das Problem das die Texte wie "Ungültiges Passwort" nicht mehr Platz haben.
Jetzt habe ich die Idee bekommen ein Warning-Image dort hinzusetzen und das mein beim drüberfahren eine Infobox angezeigt bekommt.
Die Info vom Bild alleine sieht nicht schön aus...

Ich weis keine genau Bezeichnung dafür daher kann ich auch nicht googeln..

Wenn ihr eine andere Idee habt könnt ihr diese auch Vorschlagen.

mfg.
Opa

Vincent Petritz · 4. Mai 2012, 22:31

Meinst du einen Hovereffekt?

Opa_Schlumpf · 4. Mai 2012, 22:33

Ich weis nicht ob man das mit einen Effekt hinbekommt...

Also ich möchte einfach den text "Ungültiges Passwort" gut darstellen lassen und das wenn man über das Bild fährt...

Vincent Petritz · 4. Mai 2012, 22:49

Hab dir im Anhang mal was gebastelt!

Das ganze ist HTML in Verbindung mit JavaScript (jQuery-Framework). Sofern du über den Text "Ungueltiges Passwort" fährst, erscheint "Informationen ...". Hoffe du kannst damit arbeiten, wenn nicht, sag bescheid.

dead · 4. Mai 2012, 23:06

Sollte aber auch ohne JS/jQuery gehen.

HTML-Quellcode

<html>
<head>
<style>
#pass{background:url(http://www.iconfinder.com/ajax/download/png/?id=36026&s=32) no-repeat;min-height:32px;min-width:32px}
#pass div{opacity:0;padding-top:34px}
#pass:hover div {opacity:1}
</style>
</head>
<body>
<div id="pass">
<div>Ungueltiges Passwort!</div>
</div>
</body>
</html>

Alles anzeigen

Opa_Schlumpf · 4. Mai 2012, 23:50

@Vincent
Habe eher die Variante von dead gesucht aber deine kann ich sicher auch mal verwenden. Danke
@dead
Deine Funktion klappt am besten.
Nur wie kann ich deinen CSS Code praktisch und geordnet in meine Datei einbinden?
So sieht es bei mir aus:

CSS-Quellcode

#hinweisbox {
background:url(http://www.iconfinder.com/ajax/download/png/?id=36026&s=32) no-repeat;
min-height:32px;
min-width:32px}
div{opacity:0;padding-top:34px}
#hinweisbox:hover div {opacity:1}
}

Vincent Petritz · 5. Mai 2012, 08:38

CSS-Quellcode

#hinweisbox {
background:url(http://www.iconfinder.com/ajax/download/png/?id=36026&s=32) no-repeat;
min-height:32px;
min-width:32px;
}
div {
opacity:0;padding-top:34px
}
#hinweisbox:hover div {
opacity:1
}

Alles anzeigen

So sähe das sauber und geordnet aus, Opa!

Opa_Schlumpf · 5. Mai 2012, 09:34

Wenn ich es so mache wird meine ganze Seite nicht mehr geladen...

CSS-Quellcode

#hinweisbox {
background:url(http://www.iconfinder.com/ajax/download/png/?id=36026&s=32) no-repeat;
min-height:32px;
min-width:32px;
}
div {
opacity:0;padding-top:34px
}
#hinweisbox:hover div {
opacity:1
}

Alles anzeigen

Vincent Petritz · 5. Mai 2012, 09:40

Kein Wunder, mein Fehler. So sollte es aber klappen:

CSS-Quellcode

#hinweisbox {
background:url(http://www.iconfinder.com/ajax/download/png/?id=36026&s=32) no-repeat;
min-height:32px;
min-width:32px;
}
div {
opacity: 0;
padding-top: 34px;
}
#hinweisbox:hover div {
opacity: 1;
}

Alles anzeigen

dead · 5. Mai 2012, 10:32

Nein.

CSS-Quellcode

div {
opacity: 0;
padding-top: 34px;
}

Wirkt sich auf alle div-Elemente aus, müsstest es auf das ändern:

CSS-Quellcode

#hinweisbox div {
opacity: 0;
padding-top: 34px;
}

Opa_Schlumpf · 5. Mai 2012, 15:10

Funktioniert jetzt!

Danke euch!

Vincent Petritz · 5. Mai 2012, 15:19

Bedank dich bei @dead:

Aber dennoch, gerne!

Infobox bei Image hover

Infobox bei Image hover

HTML-Quellcode

CSS-Quellcode

CSS-Quellcode

CSS-Quellcode

CSS-Quellcode

CSS-Quellcode

CSS-Quellcode

Teilen

Benutzer online 1