Contenu principal
Flouter une image en CSS

Flouter une image en CSS

21 Mai 2011

Peut-on flouter une image en CSS? Pas à ma connaissance, pas avec seulement du CSS, mais on va tricher et avoir un effet similaire.
Tout ce dont nous avons besoin c’est une image (bien sûr) et son conteneur, le CSS s’occupera du reste.

Marquage HTML

Juste une image dans une div, c’est tout.

1

<div class="blur"><img src="screenfeed.png" alt="" /></div>

Utiliser le CSS pour flouter l’image

Nos principaux outils seront opacity, background et les pseudo-éléments :before et :after. Commençons par notre div.blur.

123456

.blur {
	width: auto;
	position: relative;
	background: transparent url(screenfeed.png) 3px 3px no-repeat;
	opacity: .9;
}

Avec width: auto; on fait en sorte que la div prenne la largeur de l’image, puis on lui attribue position: relative; car nous devrons positionner :before et :after en absolu.
La partie importante : on met l’opacité du bloc à 90%, puis on met notre image en image de fond, décalée de quelques pixels.
Voilà, en gros on va faire ça plusieurs fois :)

Passons aux pseudo-éléments :before et :after.

07080910111213141516171819

.blur:before, .blur:after {
	content: url(screenfeed.png);
	position: absolute;
	left: 0;
	top: 0;
	opacity: .4;
	padding: 2px 0 0 6px;
	background: transparent url(screenfeed.png) 4px 1px no-repeat;
}
.blur:after {
	padding: 6px 0 0 2px;
	background-position: 1px 4px;
}

Avec content: url(screenfeed.png); on insère une nouvelle fois notre image, avec padding on la décale de quelques pixels, on diminue son opacité, et comme ça ne suffit pas on lui remet notre image en background, décalée encore de quelques pixels.

Il ne reste plus qu’à faire pareil la vraie balise <img> : décalage, opacité et fond. Allez, puisqu’on y est, on va utiliser des multiples backgrounds (et un background normal en fallback) :

20212223242526

.blur img {
	display: block;
	padding: 0 6px 6px 0;
	background: transparent url(screenfeed.png) 5px 5px no-repeat;
	background: url(screenfeed.png) 5px 5px no-repeat, url(screenfeed.png) 5px 0 no-repeat, url(screenfeed.png) 4px 4px no-repeat, transparent url(screenfeed.png) 2px 1px no-repeat;
	opacity: .4;
}

Détail facultatif : on va supprimer notre effet flou au survol de la souris.

2728293031323334

.blur:hover, .blur:hover img {
	background: none;
	opacity: 1;
	padding: 1px 1px 2px 2px;
}
.blur:hover:before, .blur:hover:after {
	display: none;
}

Le style complet

01020304050607080910111213141516171819202122232425262728293031323334

.blur {
	width: auto;
	position: relative;
	background: transparent url(screenfeed.png) 3px 3px no-repeat;
	opacity: .9;
}
.blur:before, .blur:after {
	content: url(screenfeed.png);
	position: absolute;
	left: 0;
	top: 0;
	opacity: .4;
	padding: 2px 0 0 6px;
	background: transparent url(screenfeed.png) 4px 1px no-repeat;
}
.blur:after {
	padding: 6px 0 0 2px;
	background-position: 1px 4px;
}
.blur img {
	display: block;
	padding: 0 6px 6px 0;
	background: transparent url(screenfeed.png) 5px 5px no-repeat;
	background: url(screenfeed.png) 5px 5px no-repeat, url(screenfeed.png) 5px 0 no-repeat, url(screenfeed.png) 4px 4px no-repeat, transparent url(screenfeed.png) 2px 1px no-repeat;
	opacity: .4;
}
.blur:hover, .blur:hover img {
	background: none;
	opacity: 1;
	padding: 1px 1px 2px 2px;
}
.blur:hover:before, .blur:hover:after {
	display: none;
}

Easy non? ;)
See ya!

PS : je déteste ce mot « flouter », jé l’impression de pa parlé franssé.