How do I change the background color based on the image?

Question

I have a list of avatars/profile pictures and I want to create an animation effect so that when the user hover over one avatar, the image bounce upwards to reveal the name underneath - which I have achieved. Can you suggest a way to also change the white background into the main color palette that makes up the image, when hovered on?

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;
  }
}