How can I code mobile hover images to change while scrolling?

[TheDD1]

Hello, 

I added this code to Assets/component-card.css.

.card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
    opacity: 0;
}
.card-wrapper:hover .media.media--hover-effect>img+img {
opacity: 1;
    transition: transform var(--duration-long) ease;
    transform: scale(1.03);
}

But my images do hover to the next on mobile but I have to hold hard or have to click the product. Is there anyway of coding it so they hover whilst scrolling on mobile with your finger like for example messika.com 

Thanks