Niko
  • Administrator

      Reputation : 319
      Registered on : 2012-02-22
      Posts : 2366
      School of codes courses: coming soon
    Rotate avatar on Hover

    Description

    Copyright according...
    This tutorial has been created by Danieel and edited by Jucarese.
    The resoruce has been copied Under the permission of the Staff of FOROACTIVO.COM.

    The original tutorial can be found at this url-link
    Tutorial Copyrigth © FOROACTIVO.COM

    With this tutorial you can rotate the avatar when you pass hover it

    Set up


    It is really simple: Go to ACPanel > Display > CSs stylesheet and paste the code of your version:

    PhpBB2:

    Code:
    .poster-profile img{
          margin-left: 3px;
        border: 5px solid #eee;
        -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
        -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
        box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }
     
    .poster-profile img:hover {
        -webkit-transform: rotate(-7deg);
        -moz-transform: rotate(-7deg);
        -o-transform: rotate(-7deg);
    }




    PhpBB3:

    Code:
    div.postprofile dl dt img{
          margin-left: 3px;
        border: 5px solid #eee;
        -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
        -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
        box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }
     
    div.postprofile dl dt img:hover {
        -webkit-transform: rotate(-7deg);
        -moz-transform: rotate(-7deg);
        -o-transform: rotate(-7deg);
    }




    PunBB:

    Code:
    div.user-basic-info img{
        margin: 3px;
        border: 5px solid #eee;
        -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
        -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
        box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }
     
    div.user-basic-info img:hover {
        -webkit-transform: rotate(-7deg);
        -moz-transform: rotate(-7deg);
        -o-transform: rotate(-7deg);
    }




    Invision:

    Code:
    dl.postdetails dt img{
          margin-bottom: 10px;
        border: 5px solid #eee;
        -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
        -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
        box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }
     
    dl.postdetails dt img:hover {
        -webkit-transform: rotate(-7deg);
        -moz-transform: rotate(-7deg);
        -o-transform: rotate(-7deg);
    }



    and it is Done :D

    Customize the tutorial


    You can change rotate(-7deg) with how much you want to rotate the avatar

    Demonstration




    Technical problems


    The tutorial was tested on this forum and with the browser Google Chrome; If you notice that the tutorial doesn't work for a browser or for a version of forum (PhpBB2, PhpBB3, PunBB, Invision) contact an administrator and we will fill this field with your reporting.

    Thanks, the staff

    For every problem or question please, contact us in the section Support for the tutorials, The staff will answer you as soon as it is possible...


    Friendly,
    The team of the Forum of Codes.



    Niko wants you in the team Guest

    Community manager and Administrator at Forumattivo.com

    Kenzo
    • *****


        Reputation : 3
        Registered on : 2012-05-02
        Posts : 197
      Thank's :) Work perfectly :D

      avatar
      • Veteran staff member

          Reputation : 0
          Registered on : 2012-05-04
          Posts : 31
        Nice!

        Nick
        • Manager

            Reputation : 20
            Registered on : 2012-04-01
            Posts : 407
          Neat!



          Rotate avatar on Hover 15px10
          ℋunni
          • **


              Reputation : 0
              Registered on : 2012-06-06
              Posts : 10
            This needs more attention.

            It's wonderful and fun <3.

            Nathan
            • Veteran staff member

                Reputation : 7
                Registered on : 2012-06-26
                Posts : 108
              Nice but some one use phpbb2 and pun bb uses some templelate to do this

              PandahFish
              • ****


                  Reputation : 2
                  Registered on : 2012-05-19
                  Posts : 52
                This is wicked!
                Really awesome! :D

                PandahFish
                • ****


                    Reputation : 2
                    Registered on : 2012-05-19
                    Posts : 52
                  This also affects my rank image.
                  How can I change it so it only rotates the avatar and not the rank?
                  My forum version is PunBB

                  J0k3R^
                  • *****


                      Reputation : 11
                      Registered on : 2014-04-25
                      Posts : 153
                      Love Fmcodes
                    awesome Niko, thanks a lot! :)