Salut,

Je viens de "mettre au point" une manière de rendre floue une image, uniquement avec du CSS (et un peu de HTML aussi).

Le principe est de créer plusieurs éléments en-dessous ou au-dessus d'une image dont l'opacité est réduite, ces éléments ayant en background l'image en question, leur opacité est réduite aussi, et on modifie le background-position pour décaler l'image à chaque fois.

Exemple :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
<div style="position:relative;">
  <div class="f1"></div>
  <div class="f2"></div>
  <div class="f3"></div>
  <div class="f4"></div>
  <img src="photo.jpg" />
</div>

Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
img {
  width : 300px;
  height : 300px;
}
 
div img {
  filter : alpha(opacity=20);
  opacity : .2;
}
 
div div {
  position : absolute;
  top : 0;
  left : 0;
  width : 300px;
  height : 300px;
  background : url("photo.jpg") no-repeat;
  filter : alpha(opacity=20);
  opacity : .2;
}
 
div .f1  { background-position : 10px 10px; }
div .f2  { background-position : 10px -10px; }
div .f3  { background-position : -10px 10px; }
div .f4  { background-position : -10px -10px; }

On peut jouer sur le background-position pour donner un effet plus ou moins flouté.

Voir des exemples de différents floutages en ligne :
http://josselin.willette.free.fr/cod...lou-image-css/

Je vais essayer aussi d'en faire un petit plugin pour jQuery histoire d'automatiser tout ça.