CSS Smooth Hover Animation Rise Effect

README.md

This code creates a smooth hover effect that rises a div slightly above its usually placement as though it glides instead of a sudden movement of step transition.

index.html

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="arrow">
  <a href="#"><i class="fa fa-arrow-down fa-2x"></i></a>
</div>

style.css

#arrow {
  position: relative;
  top: 0;
  transition: top ease 0.5s;
}
#arrow:hover {
  top: -8px;
}