Social Media - Icons hinter einem Objekt auftauchen lassen

[AukeArts]

Guten Abend zusammen,
ich möchte für mein Portfolio einen kleinen Effekt einbauen. Wenn der Benutzer über den Button fährt, bewegt sich die Grafik ein bisschen nach unten. Kein neues Effekt, jedoch weiß ich nicht wirklich wonach ich suchen soll. Javascript möchte ich nicht wirklich verwenden, für so einen billigen Effekt. Da gibt es doch bestimmt auch eine andere Mögllichkeit, oder ?

Hier nochmal eine Veranschaulichung (...der Button soll unter dem grauen Balken sein und sich beim drüberfahren nach unten verschieben)



Mit freundlichen Grüßen,
AukeArts

 

[momo95]

Hallo,
du kannst mit css einen effektz einbauen, der die grafik "starr" bewegt. d.h. die grafik springt.

Zb. so:

.icon {top: 0px;}
.icon:hover {top: 40px;}

oder du benutzt js. Damit kannst du dann eine richtige bewegung (animation) erstellen. ein schönes framework dazu wäre jquery (jQuery: The Write Less, Do More, JavaScript Library)

Du kannst auch mal diese beispiel ansehen, ich habe es auch mit jquery gemacht, du kannst es ja etwas abändern

 

[Cheffchen]

Hallo,

entweder wie @momo95 was volkommen richtig ist oder das sich nur das hintergrundbild bewegt und den eindruck erweckt das sich was bewegt.
Dies ist eigentlich üblich so auf vielen Seiten z.b. drucken und dann ändert sich meistens noch die Farbe etwas.
Der vorteil ist das sich kein div blöcke bewegen und der größte ist halt Sprites oder wie das heist mit den icon als ein bild und damit kein flackern beim effeckt.

Hier mal ein Test den ich zufällig vorrige woche erst erstelt habe.
Zweite zeile ist jetzt eins was sich bewegt, oder besser so aussieht als ob.
goo.gl/HGRIC

Cheffchen

 

[AukeArts]

Ich bedanke mich schonmal recht herzlich.
Ich nehme da wohl lieber die js variante. Meine Seite ist so oder so schon vollgestopft mit javascript (photowall, mosaic etc), da macht so ein kleines script auch nichts mehr aus.

Ich habe es schon versucht umzubauen. Die icons gehen bei Berührung nach unten, jedoch viel zu früh. Schon ca. 100px unter dem Icon reagiert das script und lässt es nach unten gleiten. Das passiert aber auch nur, wenn ich im css die top und left werte im #holder div auf null setzte. Was mache ich da falsch ?
Hinzu kommt, dass das script reagiert, wenn sich der Mauszeiger ÜBER dem Icon befindet.

Ich habe die Seite mal hochgeladen.
Home - AukeArts

CSS

@charset "utf-8";

ul.icon {position: relative; top: 20px; left: 0px; margin: 0px; padding: 0px; height: 68px; z-index: 1;}

ul.icon li {list-style:none; padding: 0px 10px 0px 10px; margin: 0px; width:48px; height: 68px; display: inline;} 
 
ul.icon li img {position: relative; top: 0; left: 0; border: 0;} 
 
#holder {position: absolute; top: 0; left: 0; margin: 0px; padding: 0px; height: 68px;} 
 
#layer {position: absolute; top: 50px; margin: 0px; padding: 0px; height: 29px; width:100%; background:url(../template/social%20media%20bookmark/layer.png); z-index: 2;}
    
a:link {text-decoration: none;}
a:hover {text-decoration: none;}
a:visited {text-decoration: none;}
a:focus {text-decoration: none; outline: 0;}
a:active {text-decoration: none;}

Mit freundlichen Grüßen,
AukeArts

 

[momo95]

Also bei mir funktioniert es wunderbar. habe es mit firefox5 und ie8 getestet.

Ich würde den effekt allerdings etwas schneller machen.

 

[AukeArts]

Komisch. Ich habe nichts geändert - und jetzt funktioniert es bei mir auch. Vllt. hat mein Firefox nie auf F5 reagiert =D

Ich bedanke mich recht herzlich und wünsche ihnen einen schönen Samstag.
PS: Die Geschwindigkeit ist so wie vorher. Ich habe sie jetzt aber etwas angepasst.

Mit freundlichen Grüßen,
AukeArts