Cacher is the code snippet organizer for pro developers

http://stackoverflow.com/questions/19767913/auto-scroll-image-taller-than-container-on-hover

http://jsfiddle.net/VuTYx/2/


HTML:
<span class="komal dhiraj">
    <img width="300px" height="auto" src="http://dribbble.s3.amazonaws.com/users/197532/screenshots/1145931/freebie-1.png" style="top: 0px" />
</span>


CSS:

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



<script>
$(document).ready(function () {
    var xH
    $('.dhiraj').hover(
    function () {
        xH = $(this).children("img").css("height");
        xH = parseInt(xH);
        xH = xH - 150;
        xH = "-" + xH + "px";
        $(this).children("img").css("top", xH);
    }, function () {
        $(this).children("img").css("top", "0px");
    });
});

</script>