如何根据图像更改背景颜色？

Question

我有一个头像/个人资料图片列表，我想创建一个动画效果，以便当用户将鼠标悬停在一个头像上时，图片会向上弹起，以显示下方的名称-这是我已经实现的。当悬停在上面时，您能否建议一种方法也将白色背景更改为构成图像的主调色板？

HTML

<div class='container'>
  <ul>
    <li class='image'>
      <img src="https://codepen-chriscoyier-bucket.imgix.net/1.png" alt="Avatar for user 1">
      <span>Anna</span>
    </li>

    <li>
      <img src="https://codepen-chriscoyier-bucket.imgix.net/2.jpg" alt="Pug">
      <span>Puggy</span>
    </li>

    <li>
      <img src="https://codepen-chriscoyier-bucket.imgix.net/3.png" alt="Pug">
      <span>Johny</span>
    </li>

    <li>
      <img src="https://codepen-chriscoyier-bucket.imgix.net/5.png" alt="Pug">
      <span>Jessie</span>
    </li>

    <li>
      <img src="https://codepen-chriscoyier-bucket.imgix.net/6.png" alt="Pug">
      <span>Lego</span>
    </li>

    <li>
      <img src="https://codepen-chriscoyier-bucket.imgix.net/7.jpg" alt="Pug">
      <span>Daniel</span>
    </li>

    <li>
      <img src="https://codepen-chriscoyier-bucket.imgix.net/8.png" alt="Pug">
      <span>Billy</span>
    </li>

    <li>
      <img src="https://codepen-chriscoyier-bucket.imgix.net/9.png" alt="Pug">
      <span>Cassie</span>
    </li>
    <li>
      <img src="https://codepen-chriscoyier-bucket.imgix.net/10.svg" alt="Pug">
      <span>Sarah</span>
    </li>
  </ul>
</div>

CSS：

@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
div.container {
  margin: 100px auto;
  color: #000;
  font-size: 14px;
  font-family: "Lato", sans-serif;
}
ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 30px;
  justify-content: space-between;
  list-style: none;
  li {
    position: relative;
    margin: 5px;
    width: 100px;
    height: 100px;
    // overflow: hidden;
    border: 2px solid #404040;
    border-radius: 100%;
    box-shadow: 0 1px 4px 3px silver;
  }
  li span {
    position: absolute;
    top: 70%;
    left: 31px;
    text-align: left;
  }
  li img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    top: 0;
    filter: grayscale(70%);
    transition-duration: 0.2s;
    z-index: 99;
  }
}
/* --- hover effect --- */
ul li:hover {
  img {
    filter: brightness(1.1);
    top: -30px;
    position: relative;
    z-index: 99;
  }
}