Profile Pictures Fade on mouseover

Xyphien

Active member
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.
 

Sheldon

Well-known member
For sidebar visitor panel:

Code:
.sidebar .visitorPanel .avatar img:hover {
    opacity: .25;
}
 

Shelley

Well-known member
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
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
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
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
 
Top