Интерактивна икона

Как да направите иконата интерактивна с transition

Интерактивността прави сайта по-жив и ангажиращ. С помощта на CSS можем да променим външния вид на иконата при hover, като я направим черно-бяла и я завъртим плавно. Най-важното е, че transition осигурява плавен преход, вместо рязка промяна на стиловете.

Стъпка по стъпка: черно-бял ефект и завъртане

1. Изберете иконата (снимката) чрез CSS селектор.
2. Добавете :hover състояние.
3. В :hover задайте filter: grayscale(100%), за да стане изображението черно-бяло.
4. Добавете и transform: rotate(360deg).
5. За плавен ефект добавете transition към основния елемент:
   
   • за filter с продължителност 1 секунда
   • за transform с продължителност 1 секунда
6. За по-добра съвместимост с Chrome използвайте и префикс -webkit- за filter.

След тези стъпки иконата ще се завърта и ще преминава в черно-бял режим плавно при преминаване с мишката.

Използвани CSS свойства

• filter – Прилага визуални ефекти като grayscale(100%) за черно-бяло изображение.
• -webkit-filter – Префикс за съвместимост с Chrome при използване на filter.
• transform – Позволява трансформации като rotate(360deg).
• transition – Създава плавен преход при промяна на свойства (напр. 1s продължителност).