Avatar Mouseover Effekt ( zoom )

FunnyGirl

@Painkiller Bei mir habe ich etwas anderes noch dazu eingefügt.In Beiträgen dreht sich der Avatar und sonst zoomt der Avatar

Kannst ja auch einmal testen.

Code

.message .messageSidebar .userAvatar > a > img {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.message .messageSidebar .userAvatar > a > img:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
.userAvatarImage{
 -webkit-transition-duration: 0.8s;
 -moz-transition-duration: 0.8s;
 -o-transition-duration: 0.8s;
 transition-duration: 0.8s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 overflow:hidden;
 }
.userAvatarImage:hover
 {
 -webkit-transform:scale(1.6);
 -moz-transform:scale(1.6);
 -o-transform:scale(1.6);
 }

Alles anzeigen

Painkiller

kann ich das bei dir mal sehen bitte

FunnyGirl

Schau mal hier

Painkiller

Cool das mach ich bei mir auch.

Weißt du auch wie ich das beim seitenlogo mache mit einer coolen Animation ?

FunnyGirl

Normalerweise erstelle ich da ein animiertes Seitenlogo als Gif Datei und füge das im Stile dann unter Logo hinzufügen rein

Painkiller

na soll ja nur nen mouseover effekt kommen. Habe ja mein logo

FunnyGirl

Ich denke das das von der Zeile 1 und 12 im code abhängig ist und man den dazugehörigen code für den Logoaufruf dort einträgt .

Painkiller

Ok ich danke dir erstmal und ich guck da später noch einmal. Gute Nacht

FunnyGirl

N8

FunnyGirl

Hi @Painkiller

Die komplette Lösung für avatar zoomen,drehen und Logo zoomen ist hier

CSS

.message .messageSidebar .userAvatar > a > img {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.message .messageSidebar .userAvatar > a > img:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
.userAvatarImage{
 -webkit-transition-duration: 0.8s;
 -moz-transition-duration: 0.8s;
 -o-transition-duration: 0.8s;
 transition-duration: 0.8s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 overflow:hidden;
 }
.userAvatarImage:hover
 {
 -webkit-transform:scale(1.6);
 -moz-transform:scale(1.6);
 -o-transform:scale(1.6);
 }
.pageHeaderLogo > a > img {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.pageHeaderLogo > a > img:hover
{
-webkit-transform:scale(1.4);
-moz-transform:scale(1.4);
-o-transform:scale(1.4);
}

Alles anzeigen

Für das zoomen des Logos die transform scale Werte dementsprechend anpassen.

und bei Smilies kann man das so per CSS machen

CSS

.smiley{
 -webkit-transition-duration: 0.6s;
 -moz-transition-duration: 0.6s;
 -o-transition-duration: 0.6s;
 transition-duration: 0.6s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 overflow:hidden;
 }
.smiley:hover
 {
 -webkit-transform:scale(1.6);
 -moz-transform:scale(1.6);
 -o-transform:scale(1.6);
 }

Alles anzeigen

mg

Painkiller

@FunnyGirl , vielen dank hatt alles geklappt.

Avatar Mouseover Effekt ( zoom )

Tags

Benutzer online in diesem Thema