Эффект поднятия текста

333
21 ноября 2017, 22:45

Как добавить эффект поднятия текста при наведении на него курсора?

Answer 1

На чистом CSS это будет выглядеть так.

.fly-on-hover span{ 
    display: inline-block; 
} 
 
.fly-on-hover:hover span{ 
    // Для более плавного эффекта, если не нужно — можно удалить. 
    transition: transform 300ms; 
    transform: translateY(-10px); 
}
<div class="fly-on-hover"> 
    <span>Text</span> 
</div>

Answer 2

Еще вариант через позиционирование:

.container { 
  margin: 20px; 
} 
 
.text { 
  position: relative; 
} 
 
.text:hover { 
  top: -5px; 
}
<div class="container"> 
  <span class="text">Текст</span> 
</div>

READ ALSO
Обернуть подстроки в HTML теги, Python

Обернуть подстроки в HTML теги, Python

Как я могу обернуть подстроки в строке в Python, в необходимые HTML теги, к примеру, есть строка:

215
Переделываю сайт на Joomla под себя

Переделываю сайт на Joomla под себя

Как добраться до index файла? Что бы сделать правки в HTML коде

188
instargram css стили

instargram css стили

Может кто хоть раз смотрел исходный код instargrama, объясните мне в чем смысл прописывать стили для элементов в таком виде, почему они не стали...

247
Наезд одного div на другой при hover

Наезд одного div на другой при hover

Здравствуйте, есть такая задачаНесколько блоков на сайте расположены друг под другом, при наведении на первый, его высота увеличивается...

224