Profile Pictures Fade on mouseover

[Xyphien]

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]

Can't you do that via CSS?

 

[Sheldon]

For sidebar visitor panel:

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

 

[Shelley]

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.

.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]

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.

.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]

For sidebar visitor panel:

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

.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]

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