How can I make these images slide up and down with jQuery?

Question

How can I make these images slide up and down with jQuery?

Navigation

#1 by (1 votes)

0

I would like to develop something in jQuery that would make the images of this page > each within your "square" would slide from top to bottom when the mouse was placed on top of the image and returned to the top as soon as the mouse was taken from above.

I do not understand much of jQuery but one thing I did was put these css classes as position: relative and position: absolute <

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;
    }

jquery css

asked by anonymous 31.05.2015 / 02:31

1 answer

Problem in smoothing the scroll on anchor links Subtract Dates MYSQL

score 1 · Accepted Answer

It 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, go to this page: link