Make an image scroll from top to bottom on hover

Image Scroll on hover Demo

In this tutorial I’ll be explaining in detail how to make an image scroll from top to bottom on hover using only CSS.

I’ll first create a div and give it a class of image-wrap or you can give it any class you think is better. Inside that I am going to put an a tag or link tag and then I’ll put my img tag inside the link tag.

<div class="image-wrap">
    <a href="https://rahmanzeb.com">
        <img src="theme-screenshot.jpg" />
    </a>
</div>

Then I’ll apply the following CSS code to achieve the image scroll from top to bottom on hover.

.image-wrap {
    width: 300px;
    height: 300px;
    overflow: hidden;
    margin: 50px auto;
}
.image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: all 1s ease-in-out;
}
.image-wrap:hover img {
    object-position: bottom center;
}

If you are familiar with CSS and HTML you should not have any problem understanding the code above, but I’ll explain it in simple terms to make it clear for you in case you are not good in HTML & CSS. I have simply created a div and given it a class of image-wrap and then I have given it a height and width of 300px and set the overflow to hidden to hide the image portion that extends the border width and height. Then I have targeted the image using CSS and set its height and width to 100% so that the object-fit and object-position works on it. The object-fit and object-position works similar like background-size and background-position. Then I set the object-fit to cover so it’s 100% width of the box and afterwards I set the object-position to top and center so it’s vertically align at top and horizontally at center. I used the transition so the animation looks smoother and beautiful as without transition it won’t look good at all. Finally I set the object-position on hover to bottom and center so the image start scrolling from top to bottom.

I have also created a video on this topic, make sure to check it in case you have any problem understanding this tutorial.