איקון במצב רגיל והובר

שלום וברכה,
בכדי ליצור מצב רגיל והובר לתמונת איקון, היכן אני אמורה לשתול את הקוד CSS בתבנית? והיכן את הקלאס?
אני מייצרת איקון צבעוני אחד למצב הובר , ושמה פילטר בגוון אפור למצב הרגיל.
כמו באתר של פרוג:
http://www.prog-school.co.il/course/

עשינו מס' ניסיונות אך נראה שכלום לא קורה:
שמנו את הקוד CSS בתוך עיצוב > ערוך > style.css של תבנית הבת
ואת הקלאס בתוך ההגדרות > CSS Classes של תמונה וטקסט ב- Builder

אשמח להכוונה
תודה רבה!

זה הקוד שיש לי:
.class-name {
filter: gray; /* IE6-9 */
filter: grayscale(1); /* Firefox 35+ */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

/* Disable grayscale on hover */
.class-name:hover {
filter: none;
-webkit-filter: grayscale(0);
}