Allez voir la préview histoire de voir ce que l’on va apprendre à faire.

Mais en gros : on va mettre en place un peu de blur ( flou ) sur une image afin de créer un petit effet sympa.

Le principe

Pour réaliser l’effet, il faut superposer 2 images :

• 1 normale
• 1 floutée mais en display none

Ensuite il reste uniquement à mettre un display block sur l’image floutée lors du hover.

On va commencer par le html pour avoir une structure simple et solide

<article class="htaccess">
  <a href="">
    <div class="content">
      <span class="date">16/07/14</span>
      <strong class="cat htaccess">.htaccess</strong>
      <strong class="title">- Customisez votre admin WordPress -</strong>
      <p>Ne gardez que l'essentiel dans votre admin WordPress !</p>
      <span class="more">Lire cet article</span>
    </div>
    <div class="maskblur" style="background-image:url(http://img15.hostingpics.net/pics/85155697mm.jpg);"></div>
    <img src="http://img15.hostingpics.net/pics/85155697mm.jpg" alt="" width="370" height="330" >
  </a>
</article>

Ici, les lignes les plus importantes sont la 10 et 11, le restant sert uniquement à mettre en forme notre exemple.

On continue avec le svg qui sera utilisé avec notre class maskblur

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="3.5" />
  </filter>
</svg>

Un peu de css pour mieux comprendre

// on style le bloc
article {
    border-radius: 10px;
    height: 330px;
    width: 370px;
}
// on prépare l'image floutée
article .maskblur {
    display: none;
    filter: url("#blur");
    height: 100%;
}
// on affiche l'image au hover
article:hover .maskblur {
    display: block;
}

Maintenant, dès que vous passez sur l’image au hover, la deuxième image ( floutée ) sera utilisée.

L’inconvénient est d’utiliser 2 images et de passer de l’une à l’autre, mais le rendu final est là.

Pour la préview, j’ai réalisé le blur dans un cas concret afin d’avoir une meilleure compréhension des possibilités.