Pause Css Animation

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

Solution 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