zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Text erscheint bei Hover

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.11.2008, 16:56
Benutzerbild von Korasu
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.05.2007
Beiträge: 106
Korasu befindet sich auf einem aufstrebenden Ast
Standard Text erscheint bei Hover

Hallo,

ich würde gerne als Hovereffekt einen Text erscheinen lassen.
Beispiel: Moritz Kröger on the Behance Network (Dort unterhalb bei den anderen Mitgliedern, wenn man über ihr Benutzerbild fährt.)

Diesen Effekt würde ich gerne reproduzieren. Ist das mittels CSS möglich?

Mein bisheriger Code ist folgender:
HTML-Code:
<div class="portfolio">
<ul>
<li><a href="#"><img src="#" width="50" height="50" border="0" alt="Referenz 1" /></a></li>
</ul>
</div>
Hier ein Link zur Seite wo ich diesen Effekt gerne anwenden würde: Korasu.de (Unter "Portfolio")
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.11.2008, 17:22
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Die von Dir gezeigte Seite enthält bereits den Code inline in den Elementen.
Sieht mir aber unnötig kompliziert aus auf den ersten Blick. Gefühlte zehn divs und ein paar Tabellenelemente.

Du könntest so vorgehen:

1 Div definieren mit Hintergrundbild
Darin ein Linkelement ( a) definieren, display block, position: relative
den gewünschten text gegebenenfalls mit spans formatieren und per negative margin in die Wüste schicken ( weit weg), beim hovern rückt der Text wieder ins Bild.

diesem a für den hoverzustand ebenfalls ein Hintergrundbild zuweisen ( einfach ein schwarzes gif mit Opazität oder besser ein gerastertes Grau/schwarz Gif, ist einfacher wegen Kompatibilität zu IE <7)

dann hast Du den selben Effekt.

Code:
CSS:

div#portfoliobild {
width: 100px;
height: 100px;
background: url(...) no-repeat transparent
color: white;
}

div#portfoliobild a: {
display: block;
height: 100px;
width: 100%
text-decoration: none;
line-height: 1em;
background: transparent;
}

div#portfoliobild a span
display: block; {
color: blue;
margin-left: -999px;
}

div#portfoliobild a:hover {
background: url (...)  transparent;   /* gif wird wiederholt, da ein gerastertes gif sonst zu mühselig wäre */
}

div#portfoliobild a:hover span {
margin-left: 0;
}


HTML:

<div><a><span></span></a></div>
So ungefähr könnts aussehen. Kann das gerade nicht überprüfen, spiel aber selbst mal damit rum.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Geändert von andir (05.11.2008 um 17:26 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.11.2008, 17:49
Benutzerbild von Korasu
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.05.2007
Beiträge: 106
Korasu befindet sich auf einem aufstrebenden Ast
Standard

Klappt, danke
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 18:30
Wachsende Container Andy CD CSS 13 10.02.2010 14:08
DIV bis GANZ unten burnZ CSS 5 27.07.2008 14:14
Helft mir. Ich habe voll die Leseschwäche nick CSS 12 15.01.2008 21:52
Problem mit div und Höhe deep4 CSS 2 13.11.2007 21:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:49 Uhr.