Play with grayscale

Hello world , this is a simpe tutorial , in this I gonna show a simple greyscale effect , you can add him anyhere , make ranks , body , pun ,anywhere you want and it's avaiable for all browsers.

Let's do a simple rank style , ok ,first we go in :
Administration panel -> Users & Groups -> Add new rank ->

• Rank Title : 
  

  Code:

  <div class="mod">Moderator</div>

• 
  
  ( a example , you can replace "mod" with anything and Moderator text
  
• Set as special Rank : Yes
  
• Rank Image URL : don't fill , let blank
  

Now , let's go in Administration Panel -> Display -> Colors -> CSS

Code:

.mod{
-webkit-filter: grayscale(1);
background: url(http://www.skinbox.net/community/public/style_images/skinbox32/highlight.png) red;
border: 1px solid #d30000;
border-radius: 4px;
color: #fff;
filter: gray;
padding: 3px 5px;
position: relative;
text-shadow: 0 1px 1px rgba(0,0,0,0.35);
top: 4px;
transition: .5s;
width: 30%;
text-align: center;
background-repeat: repeat no-repeat;
}

.mod:hover
{
    filter: none;
    -webkit-filter: none;
}

This will make the rank black and when someone put cursor on him , will make the border and background red , enjoy and see a simple example here : https://fmsoftware.forumotion.com/h1-da