|
||||
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> |
Sponsored Links |
|
|||
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>
__________________
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) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |