Blogger Ever

Create a revolving effect using CSS3

Create a revolving effect using CSS3
I've shared a social widget and that widget have unique technique of creating a revolving effect in it.On hover the image revolves and shows the next image.After release of that widget,I got the question on how to make it,because many of us do not knows these simple technique.I am showing how to make it just work perfect with simple CSS3 snippet.

Demo

Hover Me
  • Instruction

    The image which is before hover and after hover is a single image.On hover the background position just changes and because of CSS3 transition effect it looks like the images is just revolved.
    The image is used is this one





    Snippet 


    CSS

    #bloggerever
    {
    background: url('Image_URL') no-repeat;
    background-position: 0px -50px;
    display: block;
    height: 50px;
    moz-transition: all .3s ease-in-out;
    o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    webkit-transition: all .3s ease-in-out;
    width: 50px;
    }
    #bloggerever:hover
    {
    background-position: 0 0;
    }
    #bloggerever a
    {
    display: block;
    height: 50px;
    text-indent: -9999px;
    width: 50px;
    }

    The above CSS the element (bloggerever) have a width of 50px and height of 50px because of that it shows the portion of 50 by 50px but,the background-position is set to minus 50px on vetical position because the image have the coloured area at upper and black and white at lower.But on hover the background vertical position is changed to 0 thats the secret behind this.One more point that,if you want to add a link then a tag should have the same size as the image and should have text-indent of negative figure so that the text do not show in it,as I did above.

    HTML

    <li id="bloggerever">
    <a href="LINK" target="_blank"></a>
    </li>
    Blogger

    2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.