@badassstas

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

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

5e72388b6aaee487678154.png

.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>
  • Вопрос задан
  • 180 просмотров
Пригласить эксперта
Ответы на вопрос 2
Aetae
@Aetae
Тлен
Если svg - то иконка - currentColor, самому svg - boreder-radius и background-color.
Чтобы currentColor работал - svg надо подключать как svg, а не img: либо всем кодом, либо через use href.
По hover, соответственно для svg меняется color и background-color.

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

Ещё, как извращение, можно заюзать filter: invert(1) на картинке самолёта.)
Ответ написан
@badassstas Автор вопроса
Спасибо, но не совсем понятно, как использовать currentColor. Допустим я вставил иконку как object,
<object data="/img/airplane-flight.svg" type="image/svg+xml" width="30" height="30"
            class="item__icon"></object>
но свойство color к ней не применяется все равно, bgcolor просто изменяет фон в области иконки, но не саму иконку. Если не сложно, объясните подробнее, пожалуйста.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы