3

Как сделать так, чтобы картинки при наведении становились желтыми? при этом только сами картинки, а не их фон с ними ссылка на codepen

    <footer class="footer">
  <div class="footer_social-network">
          <a href="https://imgbb.com/"><img src="https://i.ibb.co/W0g9N41/instagram.png" alt="instagram" border="0"></a> <a href="https://imgbb.com/"><img src="https://i.ibb.co/mvpBMmR/odnoklassniki.png" alt="odnoklassniki" border="0"></a> <a href="https://imgbb.com/"><img src="https://i.ibb.co/86CwSs4/vk.png" alt="vk" border="0"></a>
        </div>
</footer>
.footer
  background: #000
  height: 300px
  width: 100%
  div
    display: flex
    justify-content: center
    align-items: center
    img 
      margin-right: 20px
      margin-top: 100px
1
  • 2
    используйте лучше иконочный шрифт
    – meine
    23 ноя 2019 в 22:44

3 ответа 3

4

В ручную подбирать комбинацию фильтров CSS и их параметров довольно утомительное занятие.

Но есть замечательный генератор - https://codepen.io/sosuke/pen/Pjoqqp

который можно скачать с Codepen или выполнить подборку фильтров онлайн.

Всё просто — копируем нужный цвет и получаем подборку CSS фильтров, реализующих нужный цвет.

введите сюда описание изображения

Как уже написали @meine в комментарии и @Leks в ответе, можно и нужно использовать иконочный шрифты. Так как их можно стилизовать, анимировать.

Согласитесь намного легче поменять цвет в стилях, чем подбирать комбинацию CSS фильтров.

Google Material Icons

Во многих случаях можно использовать символьный шрифт svg иконок от Google, состоящий из 900 иконок. И ваша иконка фотоаппарата camera_alt тоже есть в этом наборе.

Подключение и использование шрифта от Google не составит труда

  • Подключение шрифта:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  • Выбирать иконки по названиям можно здесь
  • Пример использования гугловского символьного шрифта:

i {
  margin: 100px 50px 50px 80px;
  transition: transform 1s ease-in-out;
}
i {color:black}
i:hover {
  transform: scale(10);
}
.yellow:hover{color:#FFC800}
.green:hover{color:yellowgreen}
.blue:hover{color: dodgerblue}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons yellow">camera_alt</i> 
<i class="material-icons green">add_a_photo</i>
<i class="material-icons blue">camera_alt</i>

3

Немного уменьшить яркость brightness(0.70) - становится серым, добавить немного желтого sepia(1) - будет бледно серо-желтым, увеличить "насыщенность" цвета saturate(500%). Бубу!)

Это не точная копия цвета - подбирал на глаз. Можете уже точнее докручивать через brightness)

body { background-color: #123; }
.footer { background: #000 height: 300px width: 100% }
.footer div { display: flex justify-content: center align-items: center }
.footer img { margin-right: 20px margin-top: 100px }

/* Добавил только эту строчку */

.footer img:hover {
  filter: brightness(0.70) sepia(1) saturate(500%);
}
<footer class="footer">
  <div class="footer_social-network">
    <a href="https://imgbb.com/"><img src="https://i.ibb.co/W0g9N41/instagram.png" alt="instagram" border="0"></a>
    <a href="https://imgbb.com/"><img src="https://i.ibb.co/mvpBMmR/odnoklassniki.png" alt="odnoklassniki" border="0"></a>
    <a href="https://imgbb.com/"><img src="https://i.ibb.co/86CwSs4/vk.png" alt="vk" border="0"></a>
  </div>
</footer>

2

body{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
}


div{
  width: 100px;
  height: 100px;
  background-color: #000;
  color: #fff;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  font-size: 60px;
}

div > i:hover{
  color: red;
}
<script src="https://kit.fontawesome.com/421d417066.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="css/main.css">
 <div>
      <i class="fas fa-camera"></i>
  </div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.