Learn 2 Methods of Image scroll on hover with CSS

Image scroll on hover – 2 Methods with CSS

by

Introduction

Hey guys & gals!

Are you looking to add flair to your website with a CSS image scroll on hover? Then be ready.

In today’s post, I will explain how you can make your images shine!

No worries, this tutorial will be a short one. You will be able to learn how to do image scroll on hover and even background-image scroll on hover with only CSS.

See below on how does our solution look like in codepen:

So after seeing what we will do in this code session of Problem Solver. Let’s bring out our favorite code editor and start the code battle!

First: Coding the HTML Structure

Scroll image on hover works on simple principles:

  • The image we use must be a long one. Meaning its height must be longer than its width. Like in this example, I used a placeholder image from Unsplash with a long length.
  • Next, we wrapped our image in a frame. In this example, I named it “your_frame”. Your frame must have a fixed height too.
  • I used Google Fonts purely for aesthetics, nothing else.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Scroll on hover(Css Solution)</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    
    <h1>Image Scroll on hover(Css Solution)</h1>

    <div class="your_frame">
      <img src="https://source.unsplash.com/random/300×1500" alt="img">
    </div>

  </div>
</body>
</html>

Now you know the basic HTML point you need to remember for image scroll on hover. We are going to into the CSS part of this project:

Magic of Transform CSS Property

For CSS let me explain what we did:

  • In our fixed frame class “your_frame“, we set CSS to “overflow: hidden“. This can hide anything that might spill over our frame.
  • “object-fit: cover” is a brand new property in CSS3. You can read about it in detail on MDN(Mozilla Docs). But what it does is: make our images fit into the container itself. This property is way better than setting your images to cover.
  • Lastly, the CSS code that makes our code animate is:
    “transform: translateY(0)”
    “transform: translateY(calc(-100% + 400px))”
  • We used the “+ 400px” according to our frame height. Do remember that!

Our Image moves or animates because — the Transform CSS property trigger the movement of the image across the Y-axis by the translateY action. Similarly, you can do horizontal scrolling by changing “translateY” to “translateX“.

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
}

.container {
  margin: 5px auto;
}

.your_frame {
  width: 500px;
  height: 400px;
  overflow: hidden;
  cursor: pointer;
}

.your_frame img {
  object-fit: cover;
  width: 100%;

  transform: translateY(0);
  transition: 5s ease-out;
}

.your_frame:hover img {
  object-fit: cover;
  transform: translateY(calc(-100% + 400px));
  transition: 5s ease-out;
}

Feel free to download this code from my GitHub link below:

Code Download

Background Image Scroll on Hover

Similar to the above example of image scroll on hover, we can do the scroll image on CSS with background images too.

However, using background images has its drawback like you cannot simply lazy load them with the “lazyload” attribute. So keep that in mind in case your project needs lazy loading.

Unlike our previous example, background-image animation works because of the CSS property: “background-position“.

What we are doing is changing the “background-position” when we hover on the image frame. For the smoothing effect, we used the simple CSS transition.

Scroll images on hover CSS can be amazing and interactive for website visitors.
Scroll images on hover CSS can be amazing and interactive for website visitors.

Download code of Background Image Scroll on Hover below:

Code Download

Conclusion

I hope you enjoyed this article on image scroll on hover with CSS. I found this way of showing website template images cool to other clients. You can even add a lightbox on click of the image. Which will make your image pop out in front of your website visitors.🤗

You can also check out my other post about 6 cool ways to do page scroll animations.

If you have any questions or concerns, please contact us anytime at Be Problem Solver. Or feel free to comment. We will reply fast!

Ta-da! guys and gals. Thank you for reading this far. I will try to bring more small snippets of code like this in the future. Happy Coding! 😁

Leave a Comment