How can I make these images slide from top to bottom and from bottom to top with jQuery?

Question

I would like to develop something in jQuery that makes the images of that page each one inside its "square" slide from top to bottom when the mouse is placed on top of the image and back to top as soon as the mouse is taken from above.

I don’t know much about jQuery but one thing I did was put these css classes as position: relative and position: Absolute thus allowing the element to change position in relation to its Parent.

HTML code

    <div class="row showtheme">
       <div class="col-md-4 col-sm-4 col-xs-12">
           <div><img src="../wp-content/uploads/2015/05/theme_version_01.png" alt="" /></div>
       </div> 
    </div> 

CSS

    .showtheme div div {
        position: relative;
        overflow: hidden !important;
        border: 5px solid #ccc;
        border-radius: 3px;         
    }
    .showtheme div div img {
        position: absolute;
        max-width: 100%;
        heigtht: auto;
    }

Answer 1

Works like this with css, now just adapt to your code:

<style>
div {
  transition: all 0.5s ease;
  width: 200px;
  height: 200px;
  margin-top: 0px;
  background: red;
}
div:hover {
  margin-top: 100px;
}

</style>

<div></div>

If you need something more complex, visit this page: http://ianlunn.github.io/Hover/