Scroll Image within a DIV tag with CSS

Spread the love

How to Scroll Image within a DIV tag with CSS. Preview and download the code from codepen.

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

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

WordPress Developer

Feel free to Contact Us.

Leave a Reply

Your email address will not be published. Required fields are marked *

Enquiry Now

Our consultants will respond back within 8 business hours or less.