how to move image vertically with css

Question

i m working with wordpress and wooslider. My problem is that i want to pan an thumbnail image on mouse hover like this: Sample Site

This is the output I achieved from wooslider however i want the effect to be like the one mentioned above: Wooslider effect

The css has the following lines, however Im finding it tough to figure out what edits to make in order to achieve the above effect

.wooslider-control-thumbs img:hover {opacity: 1;}

Answer 1

I believe, you are looking for CSS transitions:

Demo

Example:

HTML:

<img src="https://www.google.ru/images/srpr/logo4w.png" /> 

CSS:

img {
    margin: 40px;
}

img:hover {
    margin-top: 20px;
    transition: margin 1s;
}