How to Create an Image Scroll Effect From Top to Bottom On Hover

How to Create an Image Scroll Effect From Top to Bottom On Hover. Are you looking to add an eye-catching image scroll effect to your website? In this tutorial, we will show you how to create an impressive image scroll effect from top to bottom on hover using CSS and jQuery.

To get started, let’s first understand the concept behind the image scroll effect. When a user hovers over an image, we want the image to smoothly scroll from top to bottom, giving it a dynamic and interactive feel.

Step 1: Set Up the HTML Structure

The first step is to set up the HTML structure for our image scroll effect. We’ll create a container div and place our image inside it. Here’s an example:

<div class="image-container">
  <img src="your-image.jpg" alt="Your Image">
</div>

Make sure to replace “your-image.jpg” with the path to your own image.

Step 2: Add CSS Styling

Next, we’ll add some CSS styling to create the initial appearance of our image and set up the hover effect. Here’s the CSS code:

.image-container {
  position: relative;
  overflow: hidden;
  height: 300px;
  width: 500px;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  transition: top 0.5s;
}

.image-container:hover img {
  top: -100%;
}

Let’s break down the CSS code:

  • We set the container div to have a fixed height and width and relative positioning. This will contain our image and provide the necessary space for the scroll effect.
  • The image itself is absolutely positioned within the container, with its top and left properties set to 0. This ensures that the image starts at the top of the container.
  • We add a transition property to the image, which will animate the top property when it changes.
  • When the container div is hovered over, we change the top property of the image to -100%, causing it to scroll from top to bottom.

Step 3: Add jQuery for Smooth Scrolling

To achieve a smooth scrolling effect, we’ll use jQuery. Add the following code just before the closing </body> tag in your HTML file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('.image-container').hover(function() {
      $(this).find('img').stop().animate({ top: '-100%' }, 500);
    }, function() {
      $(this).find('img').stop().animate({ top: '0' }, 500);
    });
  });
</script>

This code adds an event listener to the image-container div. When the div is hovered over, we animate the top property of the image to -100% over a duration of 500 milliseconds. When the hover event ends, we animate the top property back to 0, effectively resetting the image position.

Step 4: Customize and Enhance

Now that you have the basic image scroll effect set up, you can customize and enhance it to fit your needs. You can modify the CSS to change the dimensions, add borders or shadows, or apply any other styling you desire. You can also experiment with different jQuery animation properties to create unique scroll effects.

Remember to test your image scroll effect on different screen sizes and devices to ensure it works smoothly and responsively.

Conclusion

Adding an image scroll effect from top to bottom on hover can greatly enhance the visual appeal of your website. By following the steps outlined in this tutorial, you can easily create this effect using CSS and jQuery. Remember to be creative and experiment with different styles to make it your own. Happy coding!

Related:https://cssanimation.shop/awesome-buttons-hover-glowing-effects-using-only-html-css-informativeworld713/

Watch Our More Videos On YouTube

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title></title>
</head>
<body>
<div class="main">
    <div class="colmdx"></div>
    <div class="colmdx"></div>
    <div class="colmdx"></div>
</div>
</body>
</html>
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css);
@import url('https://fonts.googleapis.com/css2?family=Alkatra&display=swap');
.main{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh
}
.colmdx{
    width: 100%;
    max-width: 330px;
    height: 500px;
    border:1px solid #000;
    margin:0 10px;
    text-align: center;
    cursor: pointer;
    padding: 5px;
    border-radius: 10px;
}
.colmdx:nth-child(1){
    background: url(https://masterofdropship.com/HTML%26CSS_Animation/scroll%20on%20hover/images/web1.png);
    background-position: top;
    background-size: cover;
    transition: linear 3s
}
.colmdx:nth-child(2){
    background: url(https://masterofdropship.com/HTML%26CSS_Animation/scroll%20on%20hover/images/web2.png);
    background-position: top;
    background-size: cover;
    transition: linear 3s
}
.colmdx:nth-child(3){
    background: url(https://masterofdropship.com/HTML%26CSS_Animation/scroll%20on%20hover/images/web3.png);
    background-position: top;
    background-size: cover;
    transition: linear 3s
}
.colmdx:hover{
    background-position: bottom;
}

Leave a Reply

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