Hover-Effekt bei Bildern

    [FONT=lucida sans unicode]Hey Leute,

    stehe vor einer kleinen Herausforderung:

    Unter http://www.proxpand.com/about/ unter dem Tab unsere Partner habe ich drei Logos als Grafiken eingebunden. Die selben Grafiken habe ich noch ein einer Stufe dunkler. Ich möchte gerne, dass bei Mouse-Over die anderen dunkleren Grafiken erscheinen, so dass ein Hover-Effekt erzeugt wird. Eventuell mit einem weichen Übergang - nicht so "hart".

    Nach Recherche (ich wollte es per CSS umsetzen) geht es anscheinend nur, dass ich diese Grafiken als Hintergrund deklariere und die dann per CSS-Effekt austauschen lasse. Dies ist für mich aber nicht so einfach, denn ich weiß nicht wie ich in Wordpress das so einfach machen kann mit dem Hintergrundbild. Am html wollte ich jetzt nicht so viel verändern.

    Auch möchte ich berücksichtigen, dass ich in ein paar Tagen/Wochen die Seite retina-fähig machen möchte mit Hilfe einer dieser Lösungen http://designwoop.com/2013/01/a-guid…ordpress-theme/ und der Effekt da auch greifen soll.

    Bin auf Lösungsansätze sehr gespannt - danke im Voraus.[/FONT]

    • 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

    [FONT=lucida sans unicode]Hab ich auch schon dran gedacht. Allerdings benötige ich zwei verschiedene, ganz bestimmte Grautöne (RGB-Angaben bzw. HEX habe ich) bei Normal-/Hover-Zustand. Wie kann man das bewerkstelligen?[/FONT]

    Zitat von tobias.pohl

    [FONT=lucida sans unicode]Allerdings benötige ich zwei verschiedene, ganz bestimmte Grautöne (RGB-Angaben bzw. HEX habe ich) bei Normal-/Hover-Zustand. Wie kann man das bewerkstelligen?[/FONT]

    Wurde doch bereits verlinkt, was gibt es da noch zu fragen? Damit jemand für Dich den entsprechenden Grauwert abstimmt, das wirst Du schon allein erledigen müssen:

    http://www.w3schools.com/css/css_image_transparency.asp

    Nein RGBa wird dir nicht weiterhelfen, es sei denn der Hintergrund der Bilder soll miteingefärbt werden.
    Die Lösung ist wie schon gesagt Opacity oder ein zweites Bild mit entsprechender Färbung.
    Den weichen Übergang bekommt man mit Transition.

    [FONT=lucida sans unicode] Melewo: Also würdest Du vorschlagen, dass dunklere Bild zu integrieren, es standardmäßig auf Transparenz zu stellen, dadurch wird es hellgrau und bei Mouseover die Transparenz verschwinden zu lassen?

    g3h: Zweites Bild habe ich ja, aber wie kann ich es austauschen ohne es als Hintergrund zu definieren?[/FONT]

    Ich würde oder hätte gar nichts vorgeschlagen, sondern ich hätte gestern gegen 11:11 mit den ersten Tests begonnen und erst gefragt, wenn ich bei einem Problem nach 24 Stunden noch keinen Schritt weiter gekommen wäre. Du fragst, fragst, fragst und beginnst nicht mit dem Testen.

    Zitat von tobias.pohl

    [FONT=lucida sans unicode] g3h: Zweites Bild habe ich ja, aber wie kann ich es austauschen ohne es als Hintergrund zu definieren?[/FONT]


    Darauf kann ich noch eine Antwort geben, weil ich da zufällig ein eigenes Beispiel habe, zwar nicht mit Transition doch mit JS. Da der Effekt nach ein paar Sekunden nicht mehr zu sehen ist, müsstest Du eventuell auf Höhe des Bildes die Seite neu laden:

    Funktion mit Überblendeffekt

    [FONT=lucida sans unicode] Melewo: JS kommt nicht in Frage, da es nur unnötig die Seite belasten würde. "Kosten"/Nutzen-Effekt zu gering.

    Werde es dann mal mit der dunkleren Grafik ausprobieren und diese mit Transparenz im Normalzustand versehen, um sie heller wirken zu lassen. Bei Hover dann die Transparenz auf null. Wird nur bissl fummelig, da man lange rumprobieren muss um den gewünschten RGB-Grau-Wert zu erhalten.[/FONT]

    1.

    Zitat

    This plugin hasn't been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

    2. Ja, nutzt es. Wenn Du Dir den Download mal angesehen hättest, dann wäre Dir aufgefallen, dass das Plugin auf eine .js Datei zurückgreift.

    Zitat von infected

    1.

    2. Ja, nutzt es. Wenn Du Dir den Download mal angesehen hättest, dann wäre Dir aufgefallen, dass das Plugin auf eine .js Datei zurückgreift.

    Er neigt nicht dazu zu lesen und selber zu machen, da müssen alle Infos in verdaulichen Häppchen hier präsentiert werden.

    Zitat von infected

    [offtopic]
    rekloV: Dessen bin ich mir bewusst. Das hatte ich hier schonmal zum Ausdruck gebracht...
    [/offtopic]

    gerade gelesen, auch ein schöner Thread...

    von der Seite die ihr hier für ihn programmiert;

    Zitat

    Kein Risiko, da nur $50 notwendig!

    Zitat

    [COLOR=#a9a9a9]Die empfohlenen Produkte bieten Vorsorgemaßnahmen, um das Risiko wirksam zu steuern, jedoch können Sie in seltenen Situationen mehr Geld verlieren, als Sie investiert haben.[/COLOR]

    ahhhhja.

    [FONT=lucida sans unicode]D. h. kein Fallback. Auf vielen mobilen Geräten ist kein JS möglich, also ist das Plugin eher nicht zu gebrauchen, oder?[/FONT]

    [FONT=lucida sans unicode]Was ist Eure Meinung zum Plugin? Komfortabel, aber wegen "nur" JS nicht zu gebrauchen oder schon ganz gut?[/FONT]

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden