在CSS3中创建额外暗线的图像模糊

这是我为之写了一些css的部分--

请注意，为了使问题更加明显，我对模糊进行了很多、更多的处理。将光标从一个图像移动到另一个图像时，图像边缘似乎有非常暗的模糊线。我怎样才能解决这个问题

编辑： 看看这张图片之间的区别： 这张照片： 第二张图片是“错误”的。由于某种原因，它的边缘正在变暗。在代码笔中更容易看到它。此外，它仅在移动光标时发生。如果光标静止不动，过一段时间它就会消失

另一个编辑：在看了很久之后，我注意到当您在某个元素上悬停时，只有该元素和它后面的元素受到这个奇怪问题的影响

<section class="section-meals">
      <ul class="meals-showcase clearfix">
        <li>
          <figure class="meal-photo">
            <img
              src="https://imgur.com/4eiEg9f.png"
              alt="Korean bibimbap with egg and vegetables"
            />
          </figure>
        </li>
        <li>
          <figure class="meal-photo">
            <img
              src="https://imgur.com/txcGRYr.png"
              alt="Simple italian pizza with cherry tomatoes"
            />
          </figure>
        </li>
        <li>
          <figure class="meal-photo">
            <img
              src="https://imgur.com/V7Y5a3y.png"
              alt="Chicken breast steak with vegetables"
            />
          </figure>
        </li>
        <li>
          <figure class="meal-photo">
            <img src="https://imgur.com/6PTG0sL.png" alt="Autumn pumpkin soup" />
          </figure>
        </li>
      </ul>
      <ul class="meals-showcase clearfix">
        <li>
          <figure class="meal-photo">
            <img
              src="https://imgur.com/uj0kVLP.png"
              alt="Paleo beef steak with vegetables"
            />
          </figure>
        </li>
        <li>
          <figure class="meal-photo">
            <img
              src="https://imgur.com/teGpV1e.png"
              alt="Healthy baguette with egg and vegetables"
            />
          </figure>
        </li>
        <li>
          <figure class="meal-photo">
            <img
              src="https://imgur.com/7bodzqR.png"
              alt="Burger with cheddar and bacon"
            />
          </figure>
        </li>
        <li>
          <figure class="meal-photo">
            <img
              src="https://imgur.com/BHkwkh1.png"
              alt="Granola with cherries and strawberries"
            />
          </figure>
        </li>
      </ul>
    </section>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: #fff;
  color: #555;
  font-family: "Lato", "Arial", sans-serif;
  font-weight: 300;
  font-size: 20px;
  text-rendering: optimizeLegibility;
}

.section-meals {
  padding: 0;
}

.meals-showcase {
  list-style: none;
  width: 100%;
}

.meals-showcase li {
  display: block;
  float: left;
  width: 25%;
}

.meal-photo {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background-color: #000;
}

.meal-photo img {
  width: 100%;
  transform: scale(1.15);
  transition: transform 0.5s, opacity 0.5s, filter 0.5s;
  opacity: 0.65;
  filter: blur(30px);
  overflow: hidden;
}

.meal-photo img:hover {
  transform: scale(1.03);
  opacity: 1;
  filter: blur(0);
}