How to pause slides autoplay when you hover over in css?

Question

I've got two problems I'm trying to solve, but with no luck.

1. I'm trying to put more than five images in the animation keeping all of them in the same row.
2. I'm trying to get the animation to stop when I hover over an image and to resume when I hover off.

It seems like there must be a simple solution in css. I've tried many variations of animation-play-state: paused, but nothing seems to work.

CSS

@charset "UTF-8";
#heading {
    margin-left: 0em;
}
#heading h1 {
    margin-top: -4em;}
#icon {
    margin-left: 50em;
}
#group2 {
    margin-left: 14em;
}
#group3 {
    margin-top: 2.5em;
    margin-left: 25em;
}
#group2 {
}

@media (min-width:768px) and (max-width:1096px){
#heading h1 {
}
#heading h1 {
}
}

@media (max-width:414px){
}

@media (orientation:landscape) and (min-width:415px) and (max-width:767px){
.relative h2 {
    float: left;
}
}
.body-all {
 max-width: 960px;
  padding-top: 5em;
  margin: auto;
}
#tabs-1, #tabs-2, #tabs-3, #tabs-4, #tabs-5{ 
    display:none;
}    
.slideshow-wrapper {
                width:704px;
                overflow:hidden;
                margin: 0 auto;
            }
            .slideshow-wrapper ul {
                margin:0;
                padding:0;
                width: 4800px;
                -webkit-animation: slideshow 12s infinite;
                -moz-animation: slideshow 12s infinite;
                -o-animation: slideshow 12s infinite;
                animation: slideshow 12s infinite;
            }
            .slides .slide-image {
                width:700px;
                display:inline-block;
                margin:0;
                padding:0;
            }
            .slides .slide-image img {
                width: 100%;
            }
/* Helper classes */

            .text-center {
                text-align: center;
            }
            .transition-all {
                -webkit-transition: all 1s;
                -moz-transition: all 1s;
                -o-transition: all 1s;
                transition: all 1s;
            }

            /* Animation */
            @-webkit-keyframes slideshow {
              0%    { margin-left: 0.5%;            }
              25%   { margin-left: -100%;   }
              50%   { margin-left: -200%;   }
              75%   { margin-left: -300%; }
              100%  { margin-left: -400%; }
            }
            @-moz-keyframes slideshow {
              0%    { margin-left: 0.5%;            }
              25%   { margin-left: -100%;   }
              50%   { margin-left: -200%;   }
              75%   { margin-left: -300%; }
                100%    { margin-left: -400%; }
            }
            @-o-keyframes slideshow {
              0%    { margin-left: 0.5%;            }
              25%   { margin-left: -100%;   }
              50%   { margin-left: -200%;   }
              75%   { margin-left: -300%; }
                100%    { margin-left: -400%; }
            }

            @keyframes slideshow {
              0%    { margin-left: 0.5%;            }
              25%   { margin-left: -100%;   }
              50%   { margin-left: -200%;   }
              75%   { margin-left: -300%; }
                100%    { margin-left: -400%; }
            }
            
            /* Media queries */
            @media only screen and (max-width:768px) {
                .slideshow-wrapper  { width:404px; }
                .slideshow-wrapper .slides .slide-image{ width:400px; }
                section { padding:0.5em; }
            }

            @media only screen and (max-width:400px) {
                .slideshow-wrapper  { width:304px; }
                .slideshow-wrapper .slides .slide-image { width:300px;}
            }

And the HTML

</div>
      <h2 style="color:black;font-family: 'Avenir'; font-weight:280; font-size:18px; letter-spacing: 0.25px; line-height:1.2;">Artists Prototypes</h2>
 <div>
   <section class="bg-blue">
<article class="slideshow">
<div class="slideshow-wrapper">
<ul class="slides">
<li class="slide-image">
<img src="image1.jpg" width="auto" height="400" alt=""/>
</li>
<li class="slide-image">
<img src="image2.jpg" width="auto" height="400" alt=""/>
</li>
<li class="slide-image">
<img src="image3.jpg" width="auto" height="400" alt=""/>
</li>
<li class="slide-image">
<img src="image4.jpg" width="auto" height="400" alt=""/>
 </li>
    <li class="slide-image">
<img src="image5.jpg" width="auto" height="400" alt=""/>
 </li>
        <li class="slide-image">
<img src="image6.jpg" width="auto" height="400" alt=""/>
 </li>
</ul>
</div>
</article>
</section>

Answer 1

Add the :hover pseudo-selector to the parent element and then use the animation-states to pause it. The images are inside the parent so it should work. Try it once.