blog.bartlweb - a technologist's external brain

Hover Grafiken mit CSS erstellen

Die meisten Hover-Effecte auf Grafiken werden mittels JS gelöst. Diese Lösung basiert rein auf CSS. Dabei enthält der betreffende Link als Inhalt das Ausgangs-Icon. Per CSS wird dieses ausgeblendet und als Hintergrundgrafik das selbe Icon noch einmal gesetzt. Dieses kann dann simple per :hover oder :focus und CSS ausgewechselt werden.

HTML

<a href="#edit" title="hovericon" class="link_icon">
  <img src="icon.gif" alt="edit"/>
</a>

CSS

a.link_icon img {
  visibility: hidden;
}
a.link_icon {
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(icon.gif);
}
a.link_icon:hover, a.link_icon:focus {
  background-image: url(icon_hover.gif);
}

Dieser Artikel hat Dir deinen Tag gerettet?

... und mühevolles Probieren, Recherchieren und damit Stunden an Zeit gespart? Oder einfach nur Dein Problem gelöst?

Dann würde ich mich freuen, wenn Du meine Zeit für die Erstellung dieses Blogartikels mit einer kleinen Anerkennung honorierst:

Zahlung mit PayPal oder Kreditkarte.

Hinweis zur Verwendung

Die Übermittlung einer Zahlung ist eine persönliche Anerkennung Ihrerseits an den Entwickler (Christian Bartl, Privatperson). Eine Zahlung ist nicht zweckgebunden und es ist keine Gegenleistung zu erwarten. Bitte beachten Sie, dass für eine übermittelte Zahlung keine Quittung ausgestellt werden kann.

Über den Autor

Christian Bartl

Christian Bartl Projektmanagement & Konzeption für Online und Mobile

Als Technologie-Enthusiast und begeisterter Programmierer entwickle ich in meiner Freizeit Websites, Software und IT-Lösungen, die mir selbst und anderen den Alltag vereinfachen.

mehr auf bartl.me

Kommentare

  1. Hi,
    danke für den Code. Klappt auch alles super, bis auf dass das icon nicht ganz angezeigt wird. Oben und unten fehlt ein Stück. Hast du vielleicht eine Idee woran es liegen könnte?

    RooK

    kommentieren

    1. Hallo RooK,

      wahrscheinlich ist dein Icon höher als die gesetzte line-height. Du kannst also entweder die line-height für deine Links erhöhen oder du kannst dem Link auch ein display:inline-block und eine fixe Höhe und Breite setzen.

      lg Christian

      kommentieren

      1. Hallo Christian,
        danke für deine Hilfe. "display:inline-block" und die Angabe der festen Werte hat super funktioniert. Dabei habe ich soviel probiert, aber dies ist mir nicht eingefallen. Dabei ist die Lösung doch so einfach. Man lernt halt nie aus.
        BTW... Die CSS ist sehr minimalistisch und übersichtlich, im gegensatz zu anderen die im Netz kursieren. Daher sehr gut geeignet für so Noobs wie mich. :)

        LG und Best Regards

        Ahmet "RooK"

        kommentieren

Kommentar schreiben

Der hier angegebene Name wird gemeinsam mit deinem Kommentar auf der Website veröffentlicht.

Deine E-Mail-Adresse wird zur einmaligen Benachrichtigung bei Veröffentlichung des Kommentars genutzt.

Benachrichtigung per E-Mail über Antworten auf meinen Kommentar erhalten.

Bitte tippe die Zahlenkombination "8592" ein, nur dann kann ich deinen Kommentar entgegennehmen.

Bitte fülle dieses Feld nicht aus, nur dann kann ich deinen Kommentar entgegennehmen.