how to move image vertically with css [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.

Closed 8 years ago.

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

Answer 2

I create this for You Example

html:

<ul>
<li><div>1</div></li>
<li><div>2</div></li>
<li><div>3</div></li>
</ul>

CSS:

ul
{
transform: translate3d(0px, 0px, 0px);
transition-duration: 0s;
width: 800%;
display: table;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
transform: none !important;
width: 100% !important;
}
ul li
{
float: left;
width: 160px;
background-color:gray;
border-right: 1px solid white;
height: 200px;
cursor: pointer;
position: relative;
}
div
{
padding-top: 77px;
height: 100px;
background-color: gold;
position: absolute;
right: 0;
bottom: 0;
width: 100%;
transition: all 0.3s ease 0s;
}
div:hover
{
height:123px;
}