Сначала картинка:
Скриншот получен во время проноса мыши над <img>ами
Вот HTML который вы видите:
<style type="text/css">
img
{
width:16px;
height:16px;
foreground-image:url(led-green.png);
}
img:hover
{
foreground-image:url(led-red.png);
transition: blend;
}
body { background-color:#c7c5c6; }
</style>
...
<body>
<div>
<img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><br>
<img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><br>
....
</div>
</body>
Идея следующая: я добавил в CSS атрибут transition который принимает два значения пока
— blend — это то что вы видите и
— slide — это поведение панелей на left side bar в Windows Explorer (XP)
Концепт сдедующий:
img:hover
{
transition: blend;
}
означает что переход в hover state или уход с него делается плавно путем последовательного
микса (blend) начального и конечного состояний.
Тоже самое и про transition: slide; — если при смене состояния изменились размеры элемента
он плавно "съезжает".
Вопрос имеет ли смысл делать что-то еще?
Сама идея blend эффект позаимствована из Opera, там кнопки все так себя ведут.
