Silver007 Silver007 - 5 months ago 30
CSS Question

Stop scrolling on mouse hover

Using https://designshack.net/articles/css/infinitephotobanner/

I would like to stop the scrolling once the mouse is hovering the image, and will continue it once it left the image.

I hope what I have requested is possible and really appreciate any help you can provide.

Answer

It can be done easily with Javascript. This Stack Overflow answer describes how CSS animations can be paused and resumed. Using this, I would say that the code that you want would look something like this:

var images = // Get all of the images in the slideshow
var first = // Get the that has the animation defined in the CSS

function pauseAnimation() {
    first.style.webkitAnimationPlayState = 'paused';
}

function resumeAnimation() {
    first.style.webkitAnimationPlayState = 'running';
}

for (var i = 0; i < images.length; i++) {
    images[i].addEventListener("mouseenter", pauseAnimation);
    images[i].addEventListener("mouseleave", resumeAnimation);
}

Here is a JSFiddle demonstrating this in action.