Как сделать такой hover?

Question

[badassstas]

Подскажите, пожалуйста, как сделать такой hover-эффект со сменой цвета иконки и белым кругом на заднем фоне?

.servGrid {
  background-color: #2F343A;
  &__content {
    padding: 120px 0;
    &-items {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .item {
        position: relative;
        width: 275px;
        height: 180px;
        background-color: #393F47;
        margin-bottom: 1px;
        &__name {
          margin: 42px 42px 35px 42px;
          font-size: 18px;
          line-height: 22px;
          text-align: center;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          color: #FFFFFF;
          font-weight: bold;
        }
        &__icon {
          margin-left: 45%;
          margin-top: 55px;
          display: block;
        }
        &__icon:before {
          content: "";
          width: 55px;
          height: 55px;
          background: #ffffff;
          position: absolute;
          border-radius: 50%;
          left: -25px;
          top: -25px;
          z-index: 10;
        }
      }
      .item:hover {
        background-color: #C8A35F;
      }
    }
  }
}

<div class="servGrid" id="servGrid">
    <div class="servGrid__content wrapper">
      <div class="rec"></div>
      <h1 class="main-title">Услуги</h1>
      <div class="servGrid__content-items">
        <div class="item">
          <img src="/img/airplane-flight.svg" alt="логотип услуги" class="item__icon">
          <p class="item__name">авиаперевозки</p>
        </div>
        <div class="item">
          <img src="/img/airplane-flight.svg" alt="логотип услуги" class="item__icon">
          <p class="item__name">авиаперевозки</p>
        </div>
        <div class="item">
          <img src="/img/airplane-flight.svg" alt="логотип услуги" class="item__icon">
          <p class="item__name">авиаперевозки</p>
        </div>
        <div class="item">
          <img src="/img/airplane-flight.svg" alt="логотип услуги" class="item__icon">
          <p class="item__name">авиаперевозки</p>
        </div>
        <div class="item">
          <img src="/img/airplane-flight.svg" alt="логотип услуги" class="item__icon">
          <p class="item__name">авиаперевозки</p>
        </div>
        <div class="item">
          <img src="/img/airplane-flight.svg" alt="логотип услуги" class="item__icon">
          <p class="item__name">авиаперевозки</p>
        </div>
        <div class="item">
          <img src="/img/airplane-flight.svg" alt="логотип услуги" class="item__icon">
          <p class="item__name">авиаперевозки</p>
        </div>
        <div class="item">
          <img src="/img/airplane-flight.svg" alt="логотип услуги" class="item__icon">
          <p class="item__name">авиаперевозки</p>
        </div>
      </div>
    </div>
  </div>

Answer 1

[Aetae]

Если svg - то иконка - currentColor, самому svg - boreder-radius и background-color.
Чтобы currentColor работал - svg надо подключать как svg, а не img: либо всем кодом, либо через use href.
По hover, соответственно для svg меняется color и background-color.

Если используешь img - то менять тебе придётся две img местами.

Ещё, как извращение, можно заюзать filter: invert(1) на картинке самолёта.)