change the look of your group legend to have a hover effect with it just add your gif to the backround
add to anywhere on your site
<div align="center"></br>
<h4 class="statistics_head">Your WebSite Here</h4></div>
<center>
<a href="#">
<div class="rnk fondator"> Administrators</div>
</a>
<a href="#">
<div class="rnk administrator"><i class="fa fa-admin"></i> Co-Administrators</div></a>
</a>
<a href="#">
<div class="rnk managerf"><i class="fa fa-managerf"></i> Managers Forum</div>
</a>
<a href="#">
<div class="rnk moderator-gl"><i class="fa fa-super"></i> Super Moderators</div>
</a>
<a href="#">
<div class="rnk moderator"><i class="fa fa-mode"></i> Moderators</div>
</a>
<a href="#">
<div class="rnk gfx"><i class="fa fa-paint-gfx"></i> Designers</div>
</a>
<a href="#">
<div class="rnk manager"><i class="fa fa-manager"></i> Manager Server</div>
</a>
<a href="#">
<div class="rnk clan"><i class="fa fa-clan"></i> Clan Leader</div>
</a>
<a href="$">
<div class="rnk vip"><i class="fa fa-vip"></i> Premium</div>
</a>
<a href="#">
<div class="rnk membru"><i class="fa fa-user-plus"></i> Members</div>
</a>
<div class="rnk ban"><font color="white" style="cursor:pointer;"><i class="fa fa-remove"></i> Banned</font></div>
add this to your css
</center>
<style>
.rnk {
margin-right: 5px;
}
.rnk {
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 5px;
color: #1A1A1A;
display: inline-block;
font-family: "Roboto Condensed",Tahoma,Helvetica;
font-size: 11px;
font-style: normal;
font-variant: normal;
font-weight: normal;
margin-bottom: -5px;
margin-top: -5px;
padding: 1px 10px;
text-decoration: none;
text-shadow: 0 -1px rgba(0,0,0,0.45);
text-transform: uppercase;
}
.rnk:hover {
display: inline-block;
font-size: 11px;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-decoration: none;
text-shadow: 0 -1px rgba(0,0,0,0.45);
text-transform: uppercase;
transition: all 0.6s;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fondator {
background-color: red;
transition: all 0.6s;
}
.fondator:hover {
background-color: rgba(0, 206, 209, 0);
color: red;
transition: all 0.6s;
}
.administrator {
background-color: darkred;
text-shadow: 1px 0px 13px #ff0000;
transition: all 0.6s;
}
.administrator:hover {
background-color: rgba(0, 206, 209, 0);
color: darkred;
text-shadow: 1px 0px 13px #ff0000;
transition: all 0.6s;
}
.managerf {
background-color: #0033FF;
text-shadow: 1px 0px 13px #ff0000;
transition: all 0.6s;
}
.managerf:hover {
background-color: rgba(0, 206, 209, 0);
color: #0033FF;
text-shadow: 1px 0px 13px #ff0000;
transition: all 0.6s;
}
.moderator-gl {
background-color: darkorange;
transition: all 0.6s;
}
.moderator-gl:hover {
background-color: rgba(0, 206, 209, 0);
color: darkorange;
transition: all 0.6s;
}
.moderator {
background-color: lime;
transition: all 0.6s;
}
.moderator:hover {
background-color: rgba(0, 206, 209, 0);
color: lime;
transition: all 0.6s;
}
.gfx {
background-color: #FF0066;
text-shadow: 1px 0px 10px #E60066;
transition: all 0.6s;
}
.gfx:hover {
background-color: rgba(0, 206, 209, 0);
color: #FF0066;
text-shadow: 1px 0px 10px #E60066;
transition: all 0.6s;
}
.manager {
background-color: #0099FF;
transition: all 0.6s;
}
.manager:hover {
background-color: rgba(0, 206, 209, 0);
color: #0099FF;
transition: all 0.6s;
}
.clan {
background-color: #40FFBF;
transition: all 0.6s;
}
.clan:hover {
background-color: rgba(0, 206, 209, 0);
color: #40FFBF;
transition: all 0.6s;
}
.vip {
background-color: yellow;
background-image: url("xFWId.gif");
transition: all 0.6s;
}
.vip:hover {
background-color: rgba(0, 206, 209, 0);
color: yellow;
background-image: url("xFWId.gif");
transition: all 0.6s;
}
.admin {
background-color: #5F9EA0;
transition: all 0.6s;
}
.admin:hover {
background-color: rgba(0, 206, 209, 0);
color: #5F9EA0;
transition: all 0.6s;
}
.membru {
background-color: grey;
transition: all 0.6s;
}
.membru:hover {
background-color: rgba(0, 206, 209, 0);
color: grey;
transition: all 0.6s;
}
.ban {
background-color: black;
background-image: url("737a3e683828.gif");
transition: all 0.6s;
}
.ban:hover {
background-color: rgba(0, 206, 209, 0);
color: black;
background-image: url("737a3e683828.gif");
transition: all 0.6s;
}
</style>
<ul>
</ul>
</if>