CSS - stopping animation with :hover (no JS) - css

Question

Is there any way of stopping animation with :hover and make it run again once hovered off?
This part is solved:
I thought of doing it with animation-state-paused, but as the animation runs on multiple elements with precised animation-delay, such solution desynchronizes elements.
What I would like to achieve 'at least' is to stop all of the animation once hovered.
Still looking for solution for this part:
And the Great Achievement would be (additionaly) to change z-index so the hovered picture goes in front of all the other ones... and come backs to its z-index from animation once hovered off + animation continues the cycle.
Important thing - NO JAVASCRIPT (I'd really like to use it, but I cannot because of some CMS settings).
Code without hover: CODEPEN and SOSnippet:
.cube2>div{
position:absolute;
left:50%;
transform: translateX(-50%);
width:450px;
}
.playground2 {
overflow: hidden;
}
.frame {
position: absolute;
top:-12px;
left:-1px;
z-index: 1;}
.one, .two, .three, .four, .five, .six, .seven, .eight{
animation: comedown 32s infinite ease-in-out
}
.eight {
animation-delay: 0s
}
.seven {
animation-delay: 4s
}
.six {
animation-delay: 8s
}
.five {
animation-delay: 12s
}
.four {
animation-delay: 16s
}
.three {
animation-delay: 20s
}
.two {
animation-delay: 24s
}
.one {
animation-delay: 28s;
}
.container {
background: darkkhaki;
height: 400px;
position: relative;
}
.cube2 {
top: 100px;
height: 300px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
#-webkit-keyframes comedown {
0% {
top: 0%;
z-index: 1;
}
12.5% {
top: 120%;
z-index: 2;
left:50%;
transform:translateX(-50%);
}
13%{z-index:-15}
25%{
top:-50px;
transform: translateX(-32%)
}
35%{z-index:-10}
37.5%{
top:-42px;
transform: translateX(-35%);
}
50%{
top:-36px;
transform: translateX(-38%);
z-index:-6;
}
62.5%{
top:-28px;
transform: translateX(-41%);
z-index:-5;
}
75%{
top:-20px;
transform: translateX(-44%);
z-index:-4;
}
87.5%{
top:-12px;
transform: translateX(-47%);
z-index:-3;
}
100%{
top:0px;
left:50%;
transform:translateX(-50%);
z-index:-2;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="playground2 container">
<div class="cube2">
<div class="one">
<img class="face" src="https://s17.postimg.org/71iegzebj/img_little.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="two">
<img class="face" src="https://s17.postimg.org/duncqzuin/img_little3.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="three">
<img class="face" src="https://s17.postimg.org/o3b8j2t6n/img_little2.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="four">
<img class="face" src="https://s17.postimg.org/v97kz9rnj/img_little4.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="five">
<img class="face" src="https://s16.postimg.org/4reke4owl/image.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="six">
<img class="face" src="https://s16.postimg.org/3qebp07x1/image.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="seven">
<img class="face" src="https://s16.postimg.org/fgs96e0ph/image.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
<div class="eight">
<img class="face" src="https://s16.postimg.org/xxmnx7gnp/image.png">
<img class="frame" src="https://s16.postimg.org/5e6yfj8d1/frame.png">
</div>
</div>
</div>

Answer 1

The trick is to catch :hover on .cube2.
This will pause the animation:
.cube2:hover > div{
-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
animation-play-state: paused;
}
To bring image box to front using z-index, use this:
.cube2 > div:hover{
z-index: 99 !important;
}

Answer 2

.cube2:hover > div.one, .cube2:hover >.two, .cube2:hover >.three, .cube2:hover >.four, .cube2:hover >.five,.cube2:hover > .six, .cube2:hover >.seven, .cube2:hover >.eight{
animation-play-state: paused;
}
This way all animation is stopped since you call hover on .cube2
See:
https://jsfiddle.net/duuhr712/