The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
3 posters

    cursor/hover effect

    WHITESABBATH
    WHITESABBATH
    WHITESABBATH
    Active Poster


    Male Posts : 1198
    Reputation : 119
    Language : English, F-Bombs
    Location : Chicago
    • Post n°1

    Solved cursor/hover effect

    Post by WHITESABBATH October 16th 2011, 6:56 pm

    Anyone know the code to get the effect shown HERE ?
    cursor over the social net icons and watch them spin.


    Last edited by WHITESABBATH on October 16th 2011, 7:42 pm; edited 1 time in total (Reason for editing : marked solved/remove link)
    • Back to top
    Mike
    Mike
    Mike
    Hyperactive


    Male Posts : 4255
    Reputation : 471
    Language : English, HTML, CSS
    Location : Loveland, Colorado
    • Post n°2

    Solved Re: cursor/hover effect

    Post by Mike October 16th 2011, 7:30 pm

    • Back to top
    Mati
    Mati
    Mati
    Active Poster


    Posts : 1928
    Reputation : 331
    Language : HTML, CSS & JavaScript
    Location : Forum Services
    • Post n°3

    Solved Re: cursor/hover effect

    Post by Mati October 16th 2011, 7:31 pm

    Add the HTML code to Display => Homepage => Generalities and save

    The HTML

    Code:
        <ul class="socialicons">
          <li><a href="#"><img src="IMAGE1" border="0"/></a></li>
          <li><a href="#"><img src="IMAGE2" border="0"/></a></li>
          <li><a href="#"><img src="IMAGE3" border="0"/></a></li>
          <li><a href="#"><img src="IMAGE4" border="0"/></a></li>
          <li><a href="#"><img src="IMAGE5" border="0"/></a></li>
        </ul>

    The CSS

    Code:
        ul.socialicons{
            list-style: none;
            margin:0px;
            padding:0px;
            position:fixed;
            left:0px;
            top:250px;
        }
        ul.socialicons li{
            padding-bottom:4px;
            padding-left:15px;
        }
        ul.socialicons li img{
            opacity:0.5;
            transition-duration:0.5s;
            -moz-transition-duration:0.5s;
            -webkit-transition-duration:0.5s;
            -o-transition-duration:0.5s;
        }
        ul.socialicons li img:hover{
            opacity:1.9;
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    • Back to top
    WHITESABBATH
    WHITESABBATH
    WHITESABBATH
    Active Poster


    Male Posts : 1198
    Reputation : 119
    Language : English, F-Bombs
    Location : Chicago
    • Post n°4

    Solved Re: cursor/hover effect

    Post by WHITESABBATH October 16th 2011, 7:41 pm

    Thanks Gents Very Happy
    • Back to top

      Current date/time is September 24th 2024, 5:31 am