Slide image bottom on mouse hover
Ok, now with this code I have my image doing the animation/transition that I wanted, moving down smoothly:

CSS:

.penduricalho{
  background-repeat: no-repeat;
  position: relative;
  top: 0px;
  left: 200px;
  margin-bottom: -500px;
  display: block;
  position: absolute;
  z-index: 2;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
}

.penduricalho:hover{  
  -moz-transform: translateY(50px); /* Firefox */
  -webkit-transform: translateY(50px); /* Safari | Chrome */
  -o-transform: translateY(50px); /* Opera */
  transform: translateY(50px);

  -moz-transition-duration: .5s;
  -webkit-transition-duration: .5s;
  -o-transition-duration: .5s;
  transition-duration: .5s;
}


HTML:

&lt;div class="penduricalho"&gt;
    &lt;a href="http://10.0.1.43/"&gt;&lt;img src="http://alojamento.fct.unl.pt/sites/all/themes/javali_theme/images/penduricalho.png"&gt;&lt;/img&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;


Run it here if you want to see the result:

https://jsfiddle.net/sn1hs9hp/