css - Make slide out up to icon img

Question

I want to make icon img to slide out up any suggestions ? like social icons in this website : http://trydo.rainbowit.net/dark-portfolio-landing#portfolio

.move-left
{
  position: relative;
  transition: transform 0.3s ease;
  transform: translateX(0px);
}
.move-left img:hover {
  transform: translateY(-4px);
  cursor: pointer;


}

            <div class="move-left">
              <li class="nav-item"><a href="#"><img        src="facebook.svg" height="16px"></a></li>
            </div>

Answer 1

I'm not sure why you intend to move the img when all of your transform and transition properties are on .move-left.

I've fixed your HTML as well as per @Paulie_D's comment.

.move-left {
  position: relative;
  transition: transform 0.3s ease;
  transform: translateX(0px);
}

ul {
  list-style: none;
}

.move-left:hover {
  transform: translateY(-4px);
  cursor: pointer;
}

<div class="move-left">
  <ul>
    <li class="nav-item">
      <a href="#"><img src="https://www.svgrepo.com/show/3885/facebook.svg" height="16px"></a>
    </li>
  </ul>
</div>