Pause css animation

Question

I made a slideshow in html and css and I want to pause the slideshow when my mouse goes over it. I tried to do this with -webkit-animation-play-state: paused;, but this only pauses 1 image and therefor messes up the slideshow. Is there a way to pause all the images on hover?

http://jsfiddle.net/m3q8pe56/

Answer 1

http://jsfiddle.net/m3q8pe56/1/

#slideshow:hover .photo {
    -webkit-animation-play-state: paused; 
    animation-play-state: paused; 
}

When you hover #slideshow you will pause all .photo within #slideshow