wie kann man einen hover Effekt mit dem Logo erzeugen

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Servus Geri,

    ganz einfach (macht man auch bei Sprites so > Google): Beide Bilder in zB Photoshop untereinander legen und nur ein Bild daraus machen. Dann zB

    Code
    <div id="dein_bild"></div>


    und in deiner css-datei

    Code
    #dein_bild {
    display: block;
    width: XYpx;
    height: XYpx; // B&H wichtig für das IE-Boxmodel
    overflow: hidden; // damit der hover-state verborgen wird
    background: url('pfad/angabe/im/theme/bild.png') no-repeat 0 0;
    }
    #dein_bild:hover {
    background-position: 150px 0; // damit rutscht das Bild beim MouseOver hin und her
    }

    Kluge Sache, die kein [x] zeigt, weil der hover-state gleich mit dem Ausgangsbild geladen wird. :mrgreen:

  • Mahlzeit Herr Kaiser,
    hmm, irgendwie klappte das nicht so, wie ich es mir vorgestellt hatte. Das Layout war sowas von im A., hola. Ich denke, ich überlasse diese Spielereien mal besser Leuten, die wissen, was sie da wirklich machen. Mein Halbwissen ist zu gefährlich.
    Danke für die Ausführungen!

  • geri: Falls Du Probleme mit dem Html-Layout hast, kann ich Dir folgende Css-Frameworks (nachstehende Links) empfehlen. Ich selbst verwende in erster Linie blueprint. Das einarbeiten und testweise erstellen von 2-3 Vorlagen dauert ca. 2h. Dann hast Du für längere Zeit Ruhe von diesen Problemen und musst Dich nicht immer damit herum ärgern:

    * Mein heiß geliebtes blueprint: http://www.blueprintcss.org/ (solltest Du damit umgehen können, schick mir eine PN und ich schick Dir meine Ergänzungen retour)
    * 960 Grid: http://960.gs/ (auch gut, aber weniger flexibel)
    * Nicht wirklich für den Produktionseinsatz, aber gut zum Lernen wie man Layout und Content-Struktur auseinander hält: http://github.com/stubbornella/oocss
    * Nur falls Du ziemlich gut mit Js bist: http://desandro.com/resources/jquery-masonry
    * Falls Du noch andere Alternativen durchsehen willst: http://www.tripwiremagazine.com/2009/06/45-css…hould-know.html

  • sollte mir mal nicht den Codex bookmarken sondern "Herr Kaiser" ;). Vielen Dank für die vielen nützlichen Links! Werde morgen den Tag damit verbringen, mich mit den vielen Links auseinander zu setzen.

    griffon: sendest Du mal nen Link, damit man sich das mal live ansehen kann? Danke.
    Der Sourcecode an der entsprechenden Stelle meines Themes ist recht komplex:


    Hab da wohl irgendwas übersehen oder zuviel weg genommen.

    Einmal editiert, zuletzt von gericoach (11. Februar 2010 um 23:37)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!