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.
HTML Code
<div class="image-scroll">
</div>
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:
//codepen.io/cssjockey/pen/ExjpprL
If you have created this effect with some other css technique, please feel free to share the link in the comments.
Comments on Scroll Image within a DIV tag with CSS