Постепенное появление размытого изображения CSS

Задача

Добиться постепенного появления предварительно размытого изображения средствами исключительно CSS.

Решение

<style>
#im {
filter: blur(10px); 
-webkit-filter: blur(10px); 
-moz-filter: blur(10px);
-o-filter: blur(10px); 
-ms-filter: blur(10px);
transition: 4s;
-webkit-transition: 4s;
-moz-transition: 4s;
-o-transition:4s;
}

#im:hover {
filter: blur(0px); 
-webkit-filter: blur(0px); 
-moz-filter: blur(0px);
-o-filter: blur(0px); 
-ms-filter: blur(0px);
transition: 4s;
-webkit-transition: 4s;
-moz-transition: 4s;
-o-transition:4s;
}
</style>
<img src="art193-1.png" id="im"/>

Комментарий к решению

Используем два свойства CSS - фильтр blur(причем прописываем так, чтобы он работал во всех браузерах) и свойство transition, в котором задаем скорость изменения (также для всех браузеров). Чем выше число в transition, тем ниже будет скорость и тем плавнее будет анимация. Результат можете наблюдать на изображении ниже, так сказать, воочию.