title: How to blur an image on mouseover using D3?
body: <p>I'm using D3, and I want to blur an image on mouseover.</p>
  
  <p>I've placed a <code>rect</code> element placed directly behind the image, and set <code>pointer-events: none</code> on the image and <code>pointer-events: all</code> on the rect. This captures mouseover events fine, but I can't get the image to blur. </p>
  
  <p>Here's my D3 code setting up the image and its <code>rect</code> element:</p>
  
  <pre><code>var newImages = images.enter()
     .append("g")
     .attr("class", "image");
  
  newImages.append("svg:image")
    .attr('class', 'image-body')
    .attr('x', 0).attr('y', 20)
    .attr("xlink:href", function(d, i) {
      return "http://placekitten.com/150/200";
    });
  
  newImages.append("rect")
    .attr('class', 'image-background')
    .attr('x', 0).attr('y', 20);
  </code></pre>
  
  <p>And CSS that doesn't work:</p>
  
  <pre><code>.image-background {
      stroke: black;
      stroke-width: 1px;
      fill: none;
      cursor: pointer;
      pointer-events: all;
      width: 150px;
      height: 200px;
  }
  .image-background:hover {
      -webkit-filter: blur(1px);
      -moz-filter: blur(1px);
      -o-filter: blur(1px);
      -ms-filter: blur(1px);
      filter: blur(1px);
  }
  .image-body {
      pointer-events:none;
      width: 150px;
      height: 200px;
  }
  </code></pre>
  
  <p>If I add <code>fill: blue</code> to <code>image-background: hover</code> then that appears just fine. Is it possible to add a blur filter instead?</p>
  
  <p>Here's my JSFiddle: <a href="https://jsfiddle.net/p4bfsvw9/2/" rel="nofollow">https://jsfiddle.net/p4bfsvw9/2/</a></p>