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.

cursor/hover effect

3 posters

The forum of the forums :: Support forum :: Scripts (Coding) Problems :: Scripts Problems Archives

Go down

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)
WHITESABBATH
WHITESABBATH
Active Poster

Male Posts : 1198
Reputation : 119
Language : English, F-Bombs
Location : Chicago

Back to top Go down

Solved Re: cursor/hover effect

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

Mike
Mike
Hyperactive

Male Posts : 4255
Reputation : 471
Language : English, HTML, CSS
Location : Loveland, Colorado

Back to top Go down

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);
    }
Mati
Mati
Hyperactive

Posts : 2020
Reputation : 330
Language : HTML, CSS & JavaScript
Location : Forum Services

https://forumservice.forumotion.com/

Back to top Go down

Solved Re: cursor/hover effect

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

Thanks Gents Very Happy
WHITESABBATH
WHITESABBATH
Active Poster

Male Posts : 1198
Reputation : 119
Language : English, F-Bombs
Location : Chicago

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: Support forum :: Scripts (Coding) Problems :: Scripts Problems Archives

 
Permissions in this forum:
You cannot reply to topics in this forum