Slide image bottom on mouse hover I have some kind of image that I want to have in all my pages of my website to use to return to my homepage.

So far, I managed to get the image in position I want and I already have displayed in all my webpages with reference link to the homepage.

But I want to go a bit far and had an animation to it, so when somebody use the mouse to hover the image I wanted the image to move some px (50px for example) to the bottom.

Yet, all I could do so far was this:

.penduricalho{
  background-repeat: no-repeat;
  position: relative;
  top: -200px;
  right: -200px;
  margin-bottom: -500px;
  -webkit-transition: bottom 0.3s;
  -moz-transition: bottom 0.3s;
  -o-transition: bottom 0.3s;
}


But with the piece of code above the image was in fact moving but it originated other problem that it would move all the content beneath it.

I tried this other code:

CSS:

.penduricalho{
  background-repeat: no-repeat;
  position: relative;
  top: -200px;
  right: -200px;
  margin-bottom: -500px;
}

figcaption { 
  position: absolute; 
  background: rgba(0,0,0,0.75); 
  color: white; 
  padding: 10px 20px; 

  opacity: 0;
  bottom: 0; 
  bottom: : -30%;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
}

figure:hover figcaption {
  opacity: 1;
  left: 0;
}


HTML:

&lt;div class="penduricalho"&gt;
    &lt;figure&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;figcaption&gt;
            aye!!
    &lt;/figure&gt;
&lt;/div&gt;


Still with this code the image wasn't moving, only appteared a text sliding. And that is similarly to want I want, that is, slide my image a bit to the bottom. But when I try to alter this latter code the page unconfigured itself.
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/