HomeHome  
  • WelcomeWelcome  
  • Events  
  • PublicationsPublications  
  • FAQFAQ  
  • SearchSearch  
  • MemberlistMemberlist  
  • UsergroupsUsergroups  
  • RegisterRegister  
  • Log inLog in  
  • You are not connected. Please login or register


    Rotate avatar on Hover

    avatar
    • Administrator

        Reputation : 315
        Registered on : 2012-02-22
        Posts : 2317
        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

      avatar
      • *****


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

        • Veteran staff member

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

          avatar
          • Manager

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



            avatar
            • **


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

              It's wonderful and fun <3.

              avatar
              • 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

                avatar
                • ****


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

                  avatar
                  • ****


                      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

                    avatar
                    • *****


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


                      YOUR BANNER HERE
                      728x90
                      DMCA.com Protection Status
                      Free forum | © PunBB | Free forum support | Contact | Report an abuse | Free forum