Bild Transparenz Mouseover

    Hallo,

    auf meiner Seite (http://www.zippster.de) hab ich derzeit ein recht umständlichen Mouseover der auch im Firefox oft zerhackt wird und es die Bilder hin und herschiebt.
    Ich wollte jetzt diesen Effekt löschen und dafür das "klassische" Mouseover haben mit:

    Mouse-Irgendwo: Bild mit Dunst/Transparenz (fast so wie es jetzt schon ist)

    Mouseover: Bild klar und mit normalen Kontrast


    Jetzt wär's sau umständlich in der CSS für jedes Bild auf der Startseite das Mouseoverbild zu definieren.

    Wie also löse ich elegant mein Problem?
    Habe schon mit CSS Opacity ausprobiert, aber das ist für die verschiedenen Browser leider Bullshit.
    Ich dachte mir, das ich eventuell auf jedes Bild vorher ein halb-transparentes PNG lege, was bei Mouseover verschwindet. Aber wie definiere ich das?
    Oder gibt es eine andere Lösung?
    Würde halt gerne zwei Bilder vermeiden (ich seh nur oft wie das Mouseoverbild noch lädt wenn man zu schnell drauf ist...)

    Ich danke schonmal!

    Tom

    • Gerade eben
    • 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,

    Ich habe mal eben bei einer Gallery nachgeschaut, die genau diesen Effekt verwendet. Dort ist es mit thumb_opacity per jquery gelöst worden. Gibt im IE und Firefox auch keine Darstellungsunterschiede.
    Allerdings denke ich, dass es mit einem transparenten PNG-Bild, wie du es bereits erwähnt hast, wesentlich einfacher zu realisieren ist (es sei denn, du beherrschst jquery).
    Da müsstest du wahrscheinlich die Bilder in ein Div legen, damit du dem Div dann einen Background geben kannst mit dem transparenten PNG, welches dann bei Mouseover (hover) verschwindet.

    "It was all a dream, I used to read word-up magazine"

    Einmal editiert, zuletzt von Jaennu (24. Juni 2011 um 14:13)

    Phu, und wie mach ich sowas? :D
    Ich hab von CSS nur gefährliches Halbwissen (oder gar Viertelwissen).
    Oder aber eben ich muss immer zwei Bilder hochladen welche eben einmal klar sind und einmal mit Dunst.
    Aber selbst das scheint ja nicht mal einfach zu sein in Wordpress... oder kann ich das eventuell im Artikel (die Startseitenfotos sind alle ein Bild pro Artikel) per HTML lösen?

    Danke aber schon mal für die Antwort.

    Hallo coas,

    Tut mir leid, ich bin im moment ziemlich beschäftigt. Ich bin mir selbst nicht mehr genau sicher, wie man es richtig macht. Vielleicht kann ich dir am Montag weiterhelfen, wenn ich wieder etwas Zeit habe.

    "It was all a dream, I used to read word-up magazine"

    Hallo Coas,

    Ich habe etwas gefunden, das dir helfen könnte:
    http://jorenrapini.com/Transify/demo.html

    Wenn du Seitenquelltext anzeigen klickst (rechte Maustaste - Seitenquelltext anzeigen) siehst du, wie es gemacht wurde. Damit hättest du deinen Transparenz-Effekt und dazu noch einen Fade-Effekt (langsames Erscheinen deines Bildes, den Wert könntest du anpassen).

    Beim Beispiel ist jedoch vieles in der demo.html eingebunden, ich würde die css Schnipsel in eine externe Datei auslagern. Dann machst du dir eine neue Datei (transify.js) und gehst beim Seitenquelltext auf transify.js. Dort kannst du alles kopieren und bei dir in die Datei einfügen.
    Du kannst dann für jedes Div ein Hintergrundbild einfügen, somit wird der Effekt auf dieses übertragen (hab es ausprobiert, hat soweit geklappt). Dann musst du nur noch wegen dem Link gucken.

    Naja, wenn du dich ein bisschen mit diesem Beispiel beschäftigst sollte es relativ einfach gehen denke ich (:

    Ich kann dir leider nur sehr begrenzt helfen, da ich praktisch keine jquery/javascript Kenntnisse habe.

    Edit: Hier ist mein Beispiel: http://web503.login-119.hoststar.ch/index.html

    "It was all a dream, I used to read word-up magazine"

    Einmal editiert, zuletzt von Jaennu (27. Juni 2011 um 15:22)

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden