Html Archives - Web Development Company | E-Commerce Development Agency

Scroll Image within a DIV tag with CSS

Posted on February 12, 2022 by ioadmin

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.

HTML Code

<div class="image-scroll">
    &nbsp;
</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%;
  }
}

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