CSS scroll on hover animation effect in Elementor

Have you ever wondered how to create this CSS-only scroll hover animation where an image of a website scrolls up and down when you hover over it with your mouse? I am using it for example in my portfolio.

Watch the video to find out how it can be done with Elementor. In case you are hand-coding your website in HTML worry not, you can use this same code. You just need to wrap your image in a div with class “portfolio” and voilà.

Here you can download the json code of the Elementor section including for the CSS scrolling animation.

This is the code used in the first example that scrolls continuously on hover.

div.portfolio {
  height: 400px;
  overflow: hidden;
}

.portfolio img {
  width: 100%;
  transform: translateY(0px);
  transition-duration: 7s;
}

.portfolio img:hover {
  transform: translateY(calc(400px - 100%));
  transition-duration: 5s;
}

With this snippet you will achieve a more natural scrolling effect, but you may need to adjust the percentages of the keyframes depending on the length of your screenshot.

div.portfolio {
height: 400px;
overflow: hidden;
}

.portfolio img {
width: 100%;
transform: translateY(0px);
}

.portfolio img:hover {
animation: scroll 10s
}

@keyframes scroll { 
    
    0% {
    transform: translateY(0px);
  }
    20% {
    transform: translateY(calc(-15%));
  }
    40% {
    transform: translateY(calc(-35%));
  }
    60% {
    transform: translateY(calc(-55%));
  }
    80% {
    transform: translateY(calc(400px - 100%));
  }
    100% {
    transform: translateY(0px);
  }
}