Mouse Over Effect

    • 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

  • Hallo,

    wenn das nicht das Bild nicht wegsliden soll, also bei Mouseover einfach ein anderes Bild, eben das mit dem Text eingeblendet werden soll, dann reicht hier einfaches css. Mit dem Befehl :hover kannst du nicht nur Links, usw. bei Mouseover anders einfärben, du kannst auch das Bild ändern lassen.

    Du definierst ein div, diesem div gibst du ein Hintergrundbild. Und diesem div mit :hover gibst du dann das Hintergrundbild das den Text enthält. Das wäre für mich die einfachste und sauberste Lösung.

    Falls du einen Fade oder Slide einbauen möchtest muss ich passen.

    VG
    Philip

  • Ich weiß nicht, ob ich richtig verstehe, aber wäre es nicht eifnacher, statt einem Plugin den html Code zu verwenden
    Mit

    <a href="ZuverlinkendeAdresse"><img src="Bild1.jpg" onmouseover="this.src='Bild2'"onmouseout="this.src='Bild1'" alt="abschicken">

    mache ich solche Sachen immer - das geht ruck zuck und du musst nicht mit einem Plugin umtun...

  • Hallöchen, ich werkel da ja auch schon ziemlich lange dran rum und habe leider auch kein gescheites Plugin gefunden, das mir hilft...
    Leider tue ich mich mit den Code-Zeilen auch ziemlich schwer.

    Wir muss ich den oben genannten Code verwenden? Habe nicht ganz verstanden, wo welcher Link rein muss..."abschicken" und "zu verlinkende Adresse" verwirren mich...

    Und wie müsste man diesen Code anpassen, damit der Hover von unten ins Bild reinfährt? So wie hier z.B.: http://www.schuchert.de/unternehmen/

    Danke für eure Hilfe!

Jetzt mitmachen!

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