Scrolling Image With Bottom Using Css

 Now we are going to see scrolling image with bottom to top using css. This concept coding are very easy to use. Single image are scroll bottom to top. See the demo video. Download the coding use on your website.

Below see the code:

Code:

<div class="w-4/12 mx-auto mt-6">

<div class="image-scroll" style="background-image: url('https://i.pinimg.com/736x/83/b3/15/83b315a642ccb031e8da1b165a69ad75--fall-wallpaper-autumn-leaves.jpg')">

    &nbsp;

  </div>

</div>

Css:

.image-scroll {

  width: 400px;

  height: 200px;

  background-size: 100%;

  background-position-x: 0;

  background-repeat: no-repeat;

  transition: all 2s ease;

  &:hover {

    background-position-y: 100%;

  }

}