/*На этом уроке мы сделаем всплывающую подсказку при наведении на иконку на чистом CSS. 
Точно такой же принцип можно применить к картинке.*/

body {
  margin: 0;
  padding: 0;
}

ul {
  margin: 10% 30%;
  /*Меняем положение иконок из вертикального положения в горизонтальное.*/
  display: flex;
  font-family: 'Lato', sans-serif;
}

ul li {
  list-style: none;
  position: relative;
  width: 75px;
  height: 50px;
  line-height: 50px;
  /*Выравнивание текста по центру по горизонтали.*/
  text-align: center;

  /*Раскрашиваем фоновую основу под иконками и цвет самих иконок.*/
  background: #cecfcf;
  color: #fff;
  /*Размер иконки задается через размер шрифта.*/
  font-size: 40px;
  transition: .5s;
}

/*При наведении курсора на иконку, меняется цвет иконки и вид курсора.*/
ul li:hover {
 color: #03a9f4;
 cursor: pointer;
}

ul li span {
/*  Всплывающая подсказка
При наведении на иконку, будет всплывать текстовая подсказка в прямоугольном блоке, 
в HTML разметке - это текст в теге span. Расположим подсказки выше иконок.*/
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  
/*Размеры боксов зададим следующие фиксированные размеры.*/
  width: 120px;
  height: 24px;

  /*Выравнивание текста по центру по вертикали.*/
  line-height: 24px;

  /*Цвет фона, текста и размер текста.*/
  background: #03a9f4;
  color: #fff;
  font-size: 14px;

  /*Скругляем углы на 4 пикселя и делаем плавный переход при наведении.*/
  border-radius: 4px;
  transition: .5s;

  /*Всплывающая подсказка делается невидимой и прозрачной.*/
  opacity: 0;
  visibility: hidden;
}

/*В обычном режиме, подсказка находится в невидимом состоянии, при наведении на иконку - плавно появляется.*/
ul li:hover span {
  opacity: 1;
  visibility: visible;
  transition: .5s ease-in-out;
  z-index: 1;
}

/*Псевдоэлемент ::before
Для того, чтобы нарисовать небольшую стрелочку под блоком, мы будем использовать 
псевдоэлемент ::before, что на практике означает, что стрелочка реально отсутствует 
в HTML файле (пустой content), а существует только в CSS файле. 
Стрелочка с направленным остриём на иконку - не что иное, как фигура квадрата 10x10 пикселей, 
повёрнутая на 45 градусов и прижатая к блоку span с отрицательным значением. 
В итоге квадрат трансформирован в треугольник и лежит на слое ниже z-index: -1, чем его родитель тег span.*/
ul li span:before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: rotate(45deg) translateX(-50%);
  width: 10px;
  height: 10px;
  background: #03a9f4;
  z-index: -1;
}