Scroll to bottom of image when mouse over

1. Css Code

<style type="text/css">

            .image-bg {

                margin:0;
                padding:0;
                background-image: url("landingpage_07.jpg");
                background-repeat: no-repeat;
                display: inline-block;
                height: 344px;
                padding-top: 31px;
                position: relative;
                width: 457px;

            }

            .image-bg:hover .image-shop-scroll {

                background-position: center 100% !important;

            }

            .image-bg .image-shop-scroll {

                transition: all 5s ease-out 0s;

            }

            .image-bg .image-shop-scroll {

                background-position: center 0;
                background-repeat: no-repeat;
                height: 313px;
                left: 0;
                margin-bottom: 20px;
                overflow: hidden;
                position: absolute;
                width: 100%;

            }

        </style>

2.html Code

<div>

            <span class="image-bg">

                <span style="background-image: url('demo1.jpg');" class="image-shop-scroll"></span>

                <span class="glare"></span>

            </span>

        </div>

Working Demo