Tipps & Tutorials, tutorial

Hover Effekt (z.B. für Social Media Buttons)

 

Ich bin’s wieder – Neele von vanillebrause 🙂 Heute möchte ich euch erklären, wie ihr den sogenannten Hover- oder Mouseover-Effekt verwirklicht. Im Prinzip geht es einfach nur darum, dass ein Bild zu einem anderen wechselt, wenn man mit der Maus drüberfährt.

Das ist zum Beispiel nützlich, wenn ihr Social Media Buttons auf eurem Blog eingebunden habt und möchtet, dass diese die Farbe wechseln, wenn man mit der Maus drüberfährt oder aber dass sie den Hintergrund wechseln. Der Kreativität sind keine Grenzen gesetzt!

1. Schritt:
Ihr benötigt eine Art Kopie eures Bildes, das ihr verwenden wollt, bei der dann zum Beispiel die Farbe anders ist oder irgendetwas hinzugefügt wurde, wie zum Beispiel Text.
Bild1 Bild2

2. Schritt:
Nun legt ihr entweder ein HTML-Widget in eurer Sidebar an oder fügt den folgenden Code einem HTML-Widget eurer Sidebar hinzu:

<img src="URLVONBILD1" onmouseover="this.src='URLVONBILD2'" onmouseout="this.src='URLVONBILD1'"/>

 

3. Schritt:
Das Ganze könnt ihr dann auch noch verlinken, zum Beispiel mit eurer Facebook-Page oder eurem Bloglovin-Link, dann würde der Code, den ihr einfügt, so aussehen:

<a href="DEINLINK">
<img src="URLVONBILD1" onmouseover="this.src='URLVONBILD2'" onmouseout="this.src='URLVONBILD1'"/>
</a>

 

Hier dann nochmal das Resultat: (mit der Maus drüberfahren!)

29 Comments

  1. MissBlueberrymuffin

    11. March 2013 at 15:09

    Wie mache ich davon mehrere nebeneinander? Also das Tutorial habe ich verstanden, aber wenn ich sowas einbinden möchte und will, dass alle Buttons nebeneinander sind. – Wie mache ich das. Ich kann keine 2 HTML-Widgets nebeneinander machen und wenn ich sie untereinander mache, dann ist der Abstand immer relativ groß. Zu Hilfe…! 😀 😀

    Liebe Grüße, Miss B.

    1. neele ♥

      11. March 2013 at 15:12

      Du machst einfach mehrere img-tags in ein HTML-Widget 😉

    2. MissBlueberrymuffin

      11. March 2013 at 15:14

      Ah, cool… das probiere ich mal aus! Vielen Dank! 😀

    3. MissBlueberrymuffin

      11. March 2013 at 16:05

      Leider klappt es nicht. Ich habe die Bilder in mein picasa-Webalbum hochgeladen und dann die URL verwendet, aber es funktioniert nicht. Da kommt dann nur so ein "kann nicht angezeigt werden Bild" aber die Verlinkung geht.
      Wie komme ich an eine URL des Bildes, die funktioniert?

  2. H.again

    11. March 2013 at 15:11

    Hey, ich habe den Effekt auch schon vor langer Zeit in meinen Blog (Sidebar) eingebaut und finde ihn wirklich super. Nur leider dauert es ein bisschen bis die Bilder sind ändern. Weißt du woran das liegen kann ?
    Liebste Grüße und schön erklärt
    Hannah ♥

    1. neele ♥

      11. March 2013 at 15:13

      Das liegt daran, dass deine Bilder einfach zu groß sind und der Browser sie erstmal laden muss. Ich kann dir das gif-Format ans Herz legen, ist zwar qualitativ geringer als jpg, aber von der Bitzahl her kleiner gehalten 🙂

    2. Jennifer Wettig

      11. March 2013 at 21:49

      Es gibt noch die Möglichkeit ein einziges Bild zu benutzen, in dem beide Einzelbilder integriert werden. Es wird aber nur der eine Teil angezeigt und beim Hover wird das Bild verschoben, dass man den anderen Teil sieht.
      Dadurch gibt es keine Verzögerung.
      zB wie hier: http://kyleschaeffer.com/user-experience/pure-css-image-hover/

  3. Sandra PusteBlume.~

    11. March 2013 at 16:39

    So ein Tutorial gibt's doch schon http://www.lovemira.de/category/tipps-tutorials/2011/11/bildwechsel-bei-mouseover.html
    Jedoch sind da die Bilder gesperrt, also ist das Tutorial hier dann doch besser … Wollte ich nur kurz aufmerksam machen 😀

    Alles Liebe!

  4. Myri

    11. March 2013 at 17:51

    Die Idee ist gut, aber es ginge noch mit weniger Bildmaterial, dann wäre es vor allem für Leute wie mich einfacher, wenn man dauernd die Farben ändern möchte, wär mir das zu umständlich. Man müsste das Symbol in einem Pseudoelement platzieren.

    Ich war grad gelangweilt und hab's ausprobiert.
    Vielleicht interessiert es ja jemanden.


    <!–Code–>
    <div class="social"><a href="http://myriamfrisano.blogspot.ch/feeds/posts/default"></a></div&gt;

    <style>
    .social{
    width: 50px;
    height: 50px;
    position: relative;
    background: #333;
    z-index: 0;
    border-radius: 3em;
    }

    .social:hover{
    background: #aaa;
    }

    .social:before{
    content:"";
    position: absolute;
    width: 30px;
    height: 30px;
    top: 10px;
    left: 10px;
    z-index: 10;
    background: url(http://4.bp.blogspot.com/-w-GdcFSbT4Y/UT4WF7KaOxI/AAAAAAAAFkw/VF9U877NkEU/s1600/rss.gif);
    }
    </style>

    1. ⒻⓁⓄ-❀

      11. March 2013 at 20:03

      danke myri,
      freue mich dich mal wieder zu lesen.
      grüßle flo
      ps. vermisse deine seite immer noch 😉

    2. Oliver Doetsch

      13. March 2013 at 0:27

      Genau genommen bräuchte man überhaupt keine zusätzlichen Bilder … das geht auch mit reinen CSS-Filter :). Rechts oben die social Buttons sind etwa so gemacht.

      Im übrigen schön mal wieder was von dir zu hören 😀 ^^

    3. Myri

      13. March 2013 at 17:10

      Stimmt, ich hab's bei mir auch ohne Bilder gemacht, aber wenn man halt die Symbole haben will… ich glaub zwar das RSS-Logo liesse sich sicher auch mit reinem CSS machen, oder? Man kann ja so einiges damit ;D
      Muss ich mal ausprobieren, wenn ich Zeit finde.

      Schön auch von dir mal wieder zu lesen ^^

  5. Anonym

    11. March 2013 at 19:23

    Waah, das Tutorial find ich ja mal toll. Und liebe Myri, danke für den Tipp. das werde ich endlich mal ausprobieren…

  6. eleonora

    11. March 2013 at 20:00

    Cooles Tutorial! Mich würde noch interessieren, wie das mit dem "Aufschieben" funktioniert, so wie zum Beispiel auf dieser Seite bei der linken Navigation =)

    Liebe Grüße,
    Eleonora

    ♥ Mein Blog ♥

    1. Jennifer Wettig

      11. March 2013 at 21:42

      Dazu gab es erst kürzlich 2 Tutorials hier, schau mal nach den "Accordions"

  7. ⒻⓁⓄ-❀

    11. March 2013 at 20:04

    ja,
    son effekt hat was, keine frage.

    grüßle flo

  8. Lara-Elain

    11. March 2013 at 20:10

    Super Anleitung, das muss ich mal unbedingt austesten und es scheint auch gar nicht so kompliziert. 🙂

  9. Elske

    12. March 2013 at 16:20

    Ich habe auch noch mal eine Frage, die ich irgendwie schon tausendmal gelöst habe, jetzt aber plötzlich nicht mehr hinbekomme:

    woher bekomme ich die URL meines Bildes?

    Bin für jeden Tipp dankbar,
    ich steck grad echt in der Klemme 😀

    Das Tutorial ist toll, wirklich schön erklärt 🙂

    1. neele ♥

      12. March 2013 at 17:48

      Versuchs mal indem du auf dein Bild rechtsklickst und dann "bild anzeigen" oder "bild in neuem tab öffnen" oder so ähnlich anklickst, dann erscheint die url des bildes in deiner browserleiste 🙂

  10. Philipp

    15. March 2013 at 9:17

    Cooler Blog! Macht weiter so! Hab hier einige sehr interessante Infos gefunden. LG

  11. Anonym

    15. March 2013 at 18:50

    bei mir funktioniert es nicht wollte mein eigenes bild nehmen aber es klappt nicht-_-

  12. Anonym

    15. March 2013 at 18:50

    entwarnung es geht doch 😀

  13. Anonym

    11. April 2013 at 7:26

    Hallo!

    Vielen Dank für dieses super Tutorial. Hab's auch gleich umgesetzt und es hat geklappt. Ich hab nur ein kleines Problem: Beim "mouseover" erscheint rechts unten am Buttonbildchen ein dünner schwarzer Strich, obwohl im Originalbild dort keins ist. Kann mir jemand sagen, was das ist und wie ich's weg bekomme? ^^

    Liebe Grüße,
    Lucia

  14. Nur-Aylin.

    13. April 2013 at 1:44

    ha! hat funktioniert nur hab ich bei den proportionen was falsch gemacht, jetzt wackelts haha 😀
    http://thisbirdhasflown-lin.blogspot.de/

  15. ParisRomAthen

    4. June 2013 at 22:02

    Danke danke danke ! Ihr helft mir alle so weiter mit euren Tutorials. :*

  16. AnniesBeauty House

    22. November 2013 at 2:34

    Muchas Gracias… das ist wieder eines der wundervollen Tutorials, die auch bei mir funktioniert haben… danke schön und Liebe Grüße

    Annie von ♥ Annies Beauty House ♥

  17. Katja

    12. February 2014 at 13:36

    Danke! genau das habe ich gerade gesucht:)

  18. Selma Yilmaz Vega

    9. October 2014 at 2:56

    Wie kriege ich das hin, dass die nicht die Farbe ändern sondern transparent werden? Vielen dank im Vorraus für die Hilfe

  19. Poppy Moore

    4. August 2015 at 20:36

    Ich wollte diesen Effekt gerne im Postbereich benutzen nur leider funktioniert das nicht…gibt es da noch einen speziellen Kniff?

    Liebe Grüße Janina

Leave a Reply