• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Profile Pictures Fade on mouseover

Xyphien

Active member
#1
So i've seen this on a few XF sites. It simply makes the profile picture dimmed when you hover the mouse over it. I've looked this up via Xenforo and google before anyone tries saying it lol. If there is a plugin already out there mind linking it below, if not could someone whip up one real fast? It doesn't seem 'that' hard, though I'm not a coder, or plugin developer.
 

Shelley

Well-known member
#4
To elaborate on stew's code for a nice smooth transition effect rather than it just snapping you could also add some css transition so hovering is smoother.

Code:
.avatar img:hover {
    opacity: .25;
    -moz-transition: all 0.7s ease-in-out 0s;
    -o-transition: all 0.7s ease-in-out 0s;
    -webkit-transition: all 0.7s ease-in-out 0s;
}
 

Shelley

Well-known member
#5
For some reason none of the above code will work in the actual profile themselves but i found by adding the following will get the profile avatars to work in a fading manner also.

Code:
.member_view .avatarScaler img:hover, .member_view .avatar .img.s:hover {
    opacity: .25;
    -moz-transition: all 0.7s ease-in-out 0s;
    -o-transition: all 0.7s ease-in-out 0s;
    -webkit-transition: all 0.7s ease-in-out 0s;
}
 

Xyphien

Active member
#6
For sidebar visitor panel:

Code:
.sidebar .visitorPanel .avatar img:hover {
    opacity: .25;
}
Thank you so much :) This works. I don't know how to do css code which is why I wasn't aware.

For some reason none of the above code will work in the actual profile themselves but i found by adding the following will get the profile avatars to work in a fading manner also.

Code:
.member_view .avatarScaler img:hover, .member_view .avatar .img.s:hover {
    opacity: .25;
    -moz-transition: all 0.7s ease-in-out 0s;
    -o-transition: all 0.7s ease-in-out 0s;
    -webkit-transition: all 0.7s ease-in-out 0s;
}
I want a more smoother transaction, but this does not seem to work for me :/ But thank you anyway :)
 

Shelley

Well-known member
#7
Thank you so much :) This works. I don't know how to do css code which is why I wasn't aware.


I want a more smoother transaction, but this does not seem to work for me :/ But thank you anyway :)
That part applies to the profile area the other part applies to all the other areas