title: Blurring background image not text on hover
body: <p>Hello dear developers,</p>
  
  <p>Iam having a problem by coding my Post grid. I want to blur the background image on hovering. But my text (in the same div is also blurring). Do you have a solution for this? Or isnt there an other way, without using this picture in a new div in the container. Want to keep it as background-image</p>
  
  <p>The posts php:</p>
  
  <pre><code>&lt;?php if (have_posts()) : while (have_posts()) : the_post(); ?&gt;
              &lt;div class="article" style="background-image: url(&lt;?php echo the_post_thumbnail_url(); ?&gt;);" onclick="self.location.href='&lt;?php echo get_permalink( $leavename = false ); ?&gt;'"&gt;
                  &lt;div class="post_info"&gt;
                      &lt;span class="post_cat"&gt;&lt;?php the_category(' ') ?&gt;&lt;/span&gt;
                      &lt;h2 class="post_title"&gt;&lt;a href="&lt;?php the_permalink() ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;
                      &lt;span class="post_date"&gt;&lt;?php the_time('d.m.Y') ?&gt;&lt;/span&gt;
                  &lt;/div&gt;
  
              &lt;!-- .article --&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The css:</p>
  
  <pre><code>.article:hover {
  -webkit-filter: blur(2px);
  }
  .article {
  margin-top: 15px;
  position: relative;
  height: 229px;
  margin-left: 15px;
  margin-right: 15px;
  float: left;
  width: 25%;
  cursor: pointer;
  }
  </code></pre>
  
  <p>Thank you for helping me out, ExotiQ</p>