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

Discussion in 'Resource and Add-on Requests' started by Xyphien, Mar 8, 2013.

  1. Xyphien

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

    Sheldon Well-Known Member

    Can't you do that via CSS?
     
  3. Sheldon

    Sheldon Well-Known Member

    For sidebar visitor panel:

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

    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;
    }
    
     
    HenrikHansen likes this.
  5. Shelley

    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;
    }
    
     
  6. Xyphien

    Xyphien Active 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 :)
     
  7. Shelley

    Shelley Well-Known Member

    That part applies to the profile area the other part applies to all the other areas
     
    Xyphien likes this.

Share This Page