title: How to blur background image on hover but not the text
body: <p>Hello I just started web developing and I am stuck at trying to blur the background image of a div on hover, but without affecting the text.</p>
  
  <p>As you can see I have an id called c1 and I used a javascript function to display text on hover, which is working great.</p>
  
  <p>Now I want to use css/javascript to blur the background image without bluring the text. Is this possible?</p>
  
  <p>My CSS:</p>
  
  <pre><code>#c1 {
      float: left;
      width: 300px;
      padding: 30px;
      margin: 15px;
      background-image: url(images/cd.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      border-radius: 20px;
      height: 150px;
  }
  
  #c1:hover {
      -webkit-filter: blur(5px);
  }
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id="productos"&gt;
      &lt;a name="jproductos"&gt;&lt;/a&gt;
      &lt;ul&gt;
          &lt;div id="c1"&gt;
          &lt;/div&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>