While your hunt for pre-built themes and templates, you must have seen this scroll effect on demo pages.

I've been working on something where I needed this functionality and I didn't want to use Javascript for this so I created this effect in pure css.


<div class="image-scroll">

CSS Code

.image-scroll {
  width: 200px;
  height: 100px;
  background-image: url('IMG-URL-HERE')"; // or specify in HTML styles.
  background-size: 100%;
  background-position-x: 0;
  background-repeat: no-repeat;
  transition: all 2s ease;
  &:hover {
    background-position-y: 100%;

Preview and use the code from this codepen: 

If you have created this effect with some other css technique, please feel free to share the link in the comments.