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??
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
WOW! Danke!
Kann ich diesen Effekt auch "einbauen" wenn ich eine auf HTML basierende Homepage habe? Also in den HTML Quelltext einfügen?
Klar kann man es theoretisch überall einbauen. Du musst dich nur mit CSS auskennen.
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?
Danke für die Links und die Info!
Werde ich mir mal zu Gemüte führen.
Gruß!