Unscharfe Bilder standardmäßig, zeigen Sie, wenn Sie schweben?

Question

Ich möchte Bilder einbetten, die standardmäßig mit CSS verwaschen sind (Quellbilddateien sind nicht unscharf). Wenn der Benutzer über ein Bild schwebt, sollte es aufgedeckt werden. Es wäre toll, wenn es auch eine Animation dazu hätte. Gibt es eine Möglichkeit, dies zu tun?

Answer 1

CSS filters (MDN Referenz) tun können, um dieses

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="" />