[Mariachi]

http://www.mylittlefabric.com/en

Wenn man oben über die Links fährt (z.B. "Sweet Food") schwenkt so eine Grafik nach oben.

Hat jemand eine Idee wie das umgesetzt wurde??

[RedParkz]

Simples CSS

Code:

#main-menu a#gourmandises img {
    left: 68px;
    opacity: 0;
    top: -55px;
    transform: translate(50px, 20px) rotate(90deg);
    transition-delay: initial;
    transition-duration: 850ms;
    transition-property: initial;
    transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);
}
#main-menu a#button-home:hover img, #main-menu a#gourmandises:hover img, #main-menu a#decouvertes:hover img, #main-menu a#griboullis:hover img, #main-menu a#gourmandises.selected img, #main-menu a#decouvertes.selected img, #main-menu a#griboullis.selected img {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg);
}

und ein Bild

Code:

<img width="77" height="64" alt="Button Gourmandises Hover" src="http://www.mylittlefabric.com/wp-content/themes/mylittlefabricV2/images/menu/button-gourmandises-hover.png">

Beim Hovvern wird die "Opacity" des Bildes geändert und die position geändert

[Mariachi]

WOW! Danke!
Kann ich diesen Effekt auch "einbauen" wenn ich eine auf HTML basierende Homepage habe? Also in den HTML Quelltext einfügen?

[RedParkz]

Klar kann man es theoretisch überall einbauen. Du musst dich nur mit CSS auskennen.

[Mariachi]

Kenne mich mit css leider nicht aus, lediglich einigermaßen mit HTML.
Heißt den css Code kann ich nicht einfach an entsprechender Stelle im HTML Code einfügen, oder?

[RedParkz]

CSS ist kein richtiger Code sondern "nur" eine Style-Anweisung für den Browser. Das ganze kommt z.B. in eine style.css welche im HEAD-Bereich deines HTML deklariert ist. Hier mal ein paar Infos zum Einlesen

http://www.w3schools.com/css/
http://de.selfhtml.org/css/

[Mariachi]

Danke für die Links und die Info!
Werde ich mir mal zu Gemüte führen.

Gruß!