Stop interaction on hover

Design help Animations & Interactions
1

Hey guys,

I’m trying to build a tweets grid section that has an infinite scroll interaction on it. But I want the interaction/animation to stop when I hover over a tweet and resume when I hover out.

I have tried using the custom CSS below, and many such CSS variations. Nothing worked. Would love some help on this.

CSS code:

.tweet-section:hover .card {
 -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}

This is the read-only link to my site: https://preview.webflow.com/preview/plum-playground?utm_medium=preview_link&utm_source=designer&utm_content=plum-playground&preview=b973f08fb2427343f9a9cbe38fe311b5&workflow=preview

2

@PixelGeek Big fan. Can you please help me here?

3

Some help here would be great. I’m having the same issue. Thanks