Weird Shadow effect coming up on CSS Blur

Question

I have some image blocks, when I hover the block their child image should be blurred and scaled with a small transition effect. It's working perfectly in firefox, but taking in WebKit browsers, there coming up a weird shadow around the edge of the blurred image.

I searched and got a solution in another question, in there they have answered using -webkit-transform: translate3d(0, 0, 0); on the element to solve the issue. But when I applied the translate3d(0, 0, 0) the shadow is not hidden and it visible like box-shadow inset till on the mouse leave. Check my fiddle and codes below

Fiddle

.grid {
    width: 40%;
    float: left;
    padding: 10px;
    background-color: red;
    figure {
      margin: 0;
      opacity: 1;
      filter: alpha(opacity=100);
      overflow: hidden;
      -webkit-transition: all, 0.3s, linear;
      -o-transition: all, 0.3s, linear;
      transition: all, 0.3s, linear;
      img {
        max-width: 100%;
        min-width: 100%;
        -webkit-transition: all, 0.3s, linear;
        -o-transition: all, 0.3s, linear;
        transition: all, 0.3s, linear;
        -webkit-filter: blur(0);
        -moz-filter: blur(0);
        filter: blur(0);
        -webkit-transform: scale(1) translate3d(0, 0, 0);
        -moz-transform: scale(1) translate3d(0, 0, 0);
        -ms-transform: scale(1) translate3d(0, 0, 0);
        -o-transform: scale(1) translate3d(0, 0, 0);
        transform: scale(1) translate3d(0, 0, 0);
      }
    }
    &:hover {
      figure {
        opacity: 0.55;
        filter: alpha(opacity=55);
        img {
          -webkit-filter: blur(8px);
          -moz-filter: blur(8px);
          filter: blur(8px);
          -webkit-transform: scale(1.06) translate3d(0, 0, 0);
          -moz-transform: scale(1.06) translate3d(0, 0, 0);
          -ms-transform: scale(1.06) translate3d(0, 0, 0);
          -o-transform: scale(1.06) translate3d(0, 0, 0);
          transform: scale(1.06) translate3d(0, 0, 0);
        }
      }
    }
  }

Is any solution to remove the drop shadow effect in WebKit browsers. Helping would be appreciated.

Answer 1

Instead of the grid being the background of the figure, make it a border around it.

Set the z-index of the figure negative, so that it is under the grid, and set the margin so that it overlaps the red border, and the bleeding edges are no longer visibles.

Even if you dont't set the negative margins, the effect is much better because now the borders bleed with white instead of red.

* {
  padding: 0;
  bottom: 0;
}
.grid {
  width: 40%;
  float: left;
  padding: 0px;
  border: solid 10px red;
}
.grid figure {
  margin: -10px;
  opacity: 1;
  overflow: hidden;
  transition: all, 0.3s, linear;
  z-index: -1;
  position: relative;
}
.grid figure img {
  max-width: 100%;
  min-width: 100%;
  transition: all, 0.3s, linear;
  -webkit-filter: blur(0);
  filter: blur(0);
  transform: scale(1) translate3d(0, 0, 0);
}
.grid:hover figure {
  opacity: 0.55;
}
.grid:hover figure img {
  -webkit-filter: blur(8px);
  -moz-filter: blur(8px);
  filter: blur(8px);
  transform: scale(1.06) translate3d(0, 0, 0);
}

<aside class="grid">
  <figure>
    <img src="http://lorempixel.com/500/500/sports/1/" alt="">
  </figure>
</aside>
<aside class="grid">
  <figure>
    <img src="http://lorempixel.com/500/500/sports/2/" alt="">
  </figure>
</aside>