I believe, you are looking for CSS transitions:
Example:
HTML:
<img src="https://www.google.ru/images/srpr/logo4w.png" />
CSS:
img {
margin: 40px;
}
img:hover {
margin-top: 20px;
transition: margin 1s;
}
Pergunta
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;}
Solução
I believe, you are looking for CSS transitions:
Example:
HTML:
<img src="https://www.google.ru/images/srpr/logo4w.png" />
CSS:
img {
margin: 40px;
}
img:hover {
margin-top: 20px;
transition: margin 1s;
}
Outras dicas
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;
}