1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Hover-Effekt bei Bildern

Dieses Thema im Forum "Design" wurde erstellt von tobias.pohl, 8. September 2013.

Schlagworte:
Seite 1 von 2
  1. tobias.pohl

    tobias.pohl Well-Known Member

    Registriert seit:
    22. Juni 2013
    Beiträge:
    297
    Zustimmungen:
    0
    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-guide-to-retina-graphics-for-your-wordpress-theme/ und der Effekt da auch greifen soll.

    Bin auf Lösungsansätze sehr gespannt - danke im Voraus.
     
    #1 tobias.pohl, 8. September 2013
  2. tobias.pohl

    tobias.pohl Well-Known Member

    Registriert seit:
    22. Juni 2013
    Beiträge:
    297
    Zustimmungen:
    0
    Keiner ne Idee?
     
    #2 tobias.pohl, 9. September 2013
  3. mfitzen

    mfitzen Well-Known Member

    Registriert seit:
    9. Juli 2006
    Beiträge:
    9.820
    Zustimmungen:
    2
    #3 mfitzen, 9. September 2013
  4. tobias.pohl

    tobias.pohl Well-Known Member

    Registriert seit:
    22. Juni 2013
    Beiträge:
    297
    Zustimmungen:
    0
    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?
     
    #4 tobias.pohl, 9. September 2013
  5. g3h

    g3h Well-Known Member

    Registriert seit:
    25. Juni 2013
    Beiträge:
    661
    Zustimmungen:
    0
    #5 g3h, 9. September 2013
  6. tobias.pohl

    tobias.pohl Well-Known Member

    Registriert seit:
    22. Juni 2013
    Beiträge:
    297
    Zustimmungen:
    0
    Und inwiefern soll mir das weiterhelfen g3h?
     
    #6 tobias.pohl, 9. September 2013
  7. Melewo

    Melewo Well-Known Member

    Registriert seit:
    8. Juli 2013
    Beiträge:
    3.097
    Zustimmungen:
    0
    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
     
    #7 Melewo, 9. September 2013
  8. g3h

    g3h Well-Known Member

    Registriert seit:
    25. Juni 2013
    Beiträge:
    661
    Zustimmungen:
    0
    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.
     
    #8 g3h, 9. September 2013
  9. Melewo

    Melewo Well-Known Member

    Registriert seit:
    8. Juli 2013
    Beiträge:
    3.097
    Zustimmungen:
    0
    Beschrieben ist es hier ganz gut, nur nicht unbedingt abwärtskompatibel. Bisher habe ich stattdessen JS mit setTimeout verwendet.

    http://www.mediaevent.de/css/transition.html
     
    #9 Melewo, 9. September 2013
  10. tobias.pohl

    tobias.pohl Well-Known Member

    Registriert seit:
    22. Juni 2013
    Beiträge:
    297
    Zustimmungen:
    0
    @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?
     
    #10 tobias.pohl, 9. September 2013
  11. Melewo

    Melewo Well-Known Member

    Registriert seit:
    8. Juli 2013
    Beiträge:
    3.097
    Zustimmungen:
    0
    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.
     
    #11 Melewo, 9. September 2013
  12. Melewo

    Melewo Well-Known Member

    Registriert seit:
    8. Juli 2013
    Beiträge:
    3.097
    Zustimmungen:
    0
    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
     
    #12 Melewo, 9. September 2013
  13. tobias.pohl

    tobias.pohl Well-Known Member

    Registriert seit:
    22. Juni 2013
    Beiträge:
    297
    Zustimmungen:
    0
    @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.
     
    #13 tobias.pohl, 11. September 2013
  14. tobias.pohl

    tobias.pohl Well-Known Member

    Registriert seit:
    22. Juni 2013
    Beiträge:
    297
    Zustimmungen:
    0
    #14 tobias.pohl, 12. September 2013
  15. tobias.pohl

    tobias.pohl Well-Known Member

    Registriert seit:
    22. Juni 2013
    Beiträge:
    297
    Zustimmungen:
    0
    #15 tobias.pohl, 13. September 2013
  16. mfitzen

    mfitzen Well-Known Member

    Registriert seit:
    9. Juli 2006
    Beiträge:
    9.820
    Zustimmungen:
    2
    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.
     
    #16 mfitzen, 13. September 2013
  17. rekloV

    rekloV Well-Known Member

    Registriert seit:
    19. Juni 2010
    Beiträge:
    238
    Zustimmungen:
    0
    Er neigt nicht dazu zu lesen und selber zu machen, da müssen alle Infos in verdaulichen Häppchen hier präsentiert werden.
     
    #17 rekloV, 14. September 2013
  18. mfitzen

    mfitzen Well-Known Member

    Registriert seit:
    9. Juli 2006
    Beiträge:
    9.820
    Zustimmungen:
    2
    [offtopic]
    @rekloV: Dessen bin ich mir bewusst. Das hatte ich hier schonmal zum Ausdruck gebracht...
    [/offtopic]
     
    #18 mfitzen, 14. September 2013
  19. rekloV

    rekloV Well-Known Member

    Registriert seit:
    19. Juni 2010
    Beiträge:
    238
    Zustimmungen:
    0
    gerade gelesen, auch ein schöner Thread...

    von der Seite die ihr hier für ihn programmiert;
    ahhhhja.
     
    #19 rekloV, 14. September 2013
  20. tobias.pohl

    tobias.pohl Well-Known Member

    Registriert seit:
    22. Juni 2013
    Beiträge:
    297
    Zustimmungen:
    0
    D. h. kein Fallback. Auf vielen mobilen Geräten ist kein JS möglich, also ist das Plugin eher nicht zu gebrauchen, oder?

    Was ist Eure Meinung zum Plugin? Komfortabel, aber wegen "nur" JS nicht zu gebrauchen oder schon ganz gut?
     
    #20 tobias.pohl, 15. September 2013
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
Seite 1 von 2
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden