title: Css blur on background image :hover but not on text
body: <p>Ex : <a href="https://jsfiddle.net/q4871w6L/" rel="nofollow">https://jsfiddle.net/q4871w6L/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.article-image {
    height: 150px;
    width: 238px;
    -webkit-filter: grayscale(0) blur(0);
    filter: grayscale(0) blur(0);
    transition: .4s ease-in-out;
  }
  .article-image:hover {
    -webkit-filter: grayscale(100%) blur(2px);
    filter: grayscale(100%) blur(2px);
    transition: .4s ease-in-out;
  }
  .ar-image {
    position: relative;
    width: 238px;
    height: 150px;
  }
  .article-image &gt; p {
    display: none;
  }
  .article-image:hover &gt; p {
    position: absolute;
    top: 40%;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: .4s ease-in-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="ar-image"&gt;
    &lt;div style="background: url('http://maximumwallhd.com/wp-content/uploads/2015/06/fonds-ecran-plage-palmier-12-660x330.jpg')" class="article-image"&gt;
      &lt;p&gt;Lire plus&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm trying to blur the background when hovering but not the text on the image.
  How can I blur the background image without blurring the text on the image ?</p>
  
  <p>Thank</p>