Display image when mouse over image

You can do this by setting opacity: 0 and a negative top property on the img. When you then hover you change these properties to opacity: 1 and a positive top property. This along with the transition will make the changes appear as animations.

To do this, you also have to "abstract" the img from the a so that it can move and hide independently and without affecting it's parent. Do this by setting the parent anchor to position: absolute and then the child image to position: relative.

There might be better ways you can accomplish this, but I only edited the css. I left your markup untouched.

Modifications after comment:

Example Fiddle

a.snapchat {
  position: relative;
  background: lightgrey;
}

a.snapchat img {
  position: absolute;
  opacity: 0;
  width: 100px;
  height: 100px;
  left: 0;
  top: -20px;
  transition: opacity .5s, top .5s;
}

a.snapchat:hover img {
  opacity: 1;
  top: 20px;
}

<a class="snapchat" style="margin: 5px 5px 0 -2px;" target="_blank" href="#">Hover for effect<img src="http://i.utdstc.com/icons/256/snapchat-android.png" /></a>

If you give an id to the div with the image (for example id="imageDiv"), you can manipulate it with CSS like this:

#imageDiv {display: none;}
a.snapchat:hover #imageDiv {display: block;}