Auto Scroll Image Taller Than Container On Hover

I want a script/css such that on hovering a image which is taller than the container it is in will auto scroll inside the container and will come back to its original position on h

Solution 1:

Not Need Jquery Only By Css

see this link

Css only :

.komal {
border-radius: 5px5px5px5px;
float: left;
height: 80px;
margin-left: 3px;
overflow: hidden;
position: relative;
width: 300px;
border:5px solid #DDD;
}
img {
position: absolute;
transition: all 0.2s ease 0s;
}

 .komal:hover >img
 {  
 -moz-animation: border-bounce 3000ms linear;
 -webkit-animation: border-bounce 3000ms linear;
 }
 @-moz-keyframes border-bounce {
 0%   { margin-top: -10px;  }
 25%  { margin-top: -50px; }
 50%  { margin-top: -100px;  }
 75%  { margin-top: -50px;  }
 100% { margin-top: -0px;  }
 }
 @-webkit-keyframes border-bounce {
 0%   { margin-top: -10px;  }
 25%  { margin-top: -50px; }
 50%  { margin-top: -100px;  }
 75%  { margin-top: -50px;  }
 100% { margin-top: -0px;  }
 }

Solution 2:

Your JS appears to have been working, but the code included jQuery while the Fiddle didn't have jQuery enabled. I enabled jQuery and it seems to work as you described: http://jsfiddle.net/VuTYx/2/

Make sure that jQuery is correctly included in your project by adding something like:

<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>