Mouseover-Effekt: SW-Farbig (für eine Staff-List)

  • wickedworld

    (@wickedworld)


    vor 7 Jahren, 5 Monaten

    Hallo an alle,
    ich habe eine Frage. Ich würde gerne eine Seite mit Ansprechpartnern einer Firma erstellen. Pro Mitarbeiter ein Bild und unter dem Bild jeweils E-Mail-Adresse, Durchwahl, etc.

    Wenn man über das schwarz-weiße Bild der entsprechenden Person mit der Maus fährt, soll das Bild farbig werden. Wie setze ich das am Besten um?

    Gibt es für eine sogenannte „Staff-List“ ein Plugin oder was würdet ihr vorschlagen?

    Danke im Voraus!

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Florian Brinkmann

    (@florianbrinkmann)

    vor 7 Jahren, 5 Monaten

    Hi!

    Dafür brauchst du kein Plugin, sondern nur ein wenig CSS 🙂 Das könnte ungefähr so aussehen:

    .staff img {
    filter: grayscale(1);
}

.staff img:hover {
    filter: grayscale(0);
}

    Einfügen kannst du das nach der Anpassung an das Markup der Mitarbeiter-Liste in das »Zusätzliches CSS«-Feld im Customizer.

    Viele Grüße
    Florian

    Thread-Starter wickedworld

    (@wickedworld)

    vor 7 Jahren, 5 Monaten

    Hallo Florian Brinkmann,

    danke für deine Antwort!

    Ich nutze das Avada Design und habe unten „Zusätzliches CSS-Feld“ gefunden. Da einfach den Code von dir oben einfügen oder?

    Wie stelle ich ein, dass dieser Code nur auf der Mitarbeiter-Liste greift und nicht auf allen Seiten allgemein? Was meinst du mit Markup der Mitarbeiterliste?

    Kenne mich leider noch nicht so mit WordPress aus.

    Danke im Voraus!

    Florian Brinkmann

    (@florianbrinkmann)

    vor 7 Jahren, 5 Monaten

    Hey,

    wenn du einen Link zu der Mitarbeiterliste postest, kann ich den Code entsprechend anpassen 🙂

    Viele Grüße!

    Thread-Starter wickedworld

    (@wickedworld)

    vor 7 Jahren, 5 Monaten

    Das wäre super, danke!
    Ich schalte den Zugang für 60 Minuten frei.
    Ich habe einfach mal nur ein Beispielbild eingestellt, werden natürlich noch einige andere Bilder dazu kommen. Hier der Link: xxx *

    Danke!

    *Moderationshinweis: Link auf Wunsch des Autoren gelöscht. Grüße, Bego

    • Diese Antwort wurde geändert vor 7 Jahren, 5 Monaten von Bego Mario Garde. Grund: Link gelöscht
    Florian Brinkmann

    (@florianbrinkmann)

    vor 7 Jahren, 5 Monaten

    Ah, ich hatte da etwas falsch verstanden – ich dachte, du nutzt schon etwas Plugin-Artiges für diese Liste und brauchst nur etwas für diesen Hover-Effekt … Du könntest es wie folgt lösen: Gehe in der Bearbeitungsansicht dieser Seite in die Textansicht und füge ganz am Anfang ein <div class="staff"> ein, und ganz am Ende ein </div>. Damit sollte es dann mit dem Code von oben funktionieren. Bei weiteren Mitarbeitern musst du dann nur darauf achten, dass sie alle zwischen diesen Beiden Elementen eingefügt werden.

    Thread-Starter wickedworld

    (@wickedworld)

    vor 7 Jahren, 5 Monaten

    Danke! Leider funktioniert das nicht. Mit dem Code verschieben sich jetzt die Bilder immer und lassen sich nicht mehr schön formatieren.

    Gibt es kein Plugin, bei der man eine Mitarbeiterliste erstellen kann? Bzw. welche könntet ihr empfehlen?

    Ich habe mal etwas ausprobiert: … *
    Aber jetzt geht es leider nicht dass das Bild schwarz/weiß ist…

    *Moderationshinweis: Link auf Wunsch des Autoren gelöscht. Grüße, Bego

    Florian Brinkmann

    (@florianbrinkmann)

    vor 7 Jahren, 5 Monaten

    Erfahrung mit solchen Plugins habe ich nicht, nein … Mit dem, das du jetzt installiert hast, sollte es mit diesem Code klappen:

    .tmm_photo {
    filter: grayscale(1);
}

.tmm_photo:hover {
    filter: grayscale(0);
}
Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Das Thema „Mouseover-Effekt: SW-Farbig (für eine Staff-List)“ ist für neue Antworten geschlossen.

Schlagwörter