Размытые изображения по умолчанию отображаются при падении?

Question

Я хотел бы вставлять изображения, которые по умолчанию размываются с использованием CSS (исходные файлы изображений не размыты c). Когда пользователь наводится над изображением, он должен быть раскрыт. Было бы здорово, если бы на нем была анимация. Есть какой-либо способ сделать это?

Answer 1

CSS filters (MDN Reference) может это сделать

img { 
 
    -webkit-filter: blur(10px); 
 
    filter: blur(10px); 
 
    -webkit-transition: -webkit-filter .5s linear; 
 
    transition: -webkit-filter .5s linear; 
 
    transition: filter .5s linear; 
 
    transition: filter .5s linear, -webkit-filter .5s linear; 
 
} 
 
img:hover { 
 
    -webkit-filter: blur(0); 
 
    filter: blur(0) 
 
}

<img src="http://www.fillmurray.com/460/300" alt="" />