Scroll to bottom of image when mouse over

1. Css Code
<style type="text/css">

            .image-bg {

                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%;



2.html Code


            <span class="image-bg">

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

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


Working Demo


Popular posts from this blog

Set limit wp_nav_menu

Conut document have children that are show in navigation