Mettre en pause des sliders

Bonjour,
Sur la page d’accueil de mon site j'ai 3 sliders automatiques faits uniquement au HTML/CSS. Y a t-il un moyen de les mettre en pause que ce soit au survol de la souris ou bien avec un bouton quelconque ?
Je suis débutant autodidacte en programmation et je ne connais encore rien au javascript.
J'aimerais aussi par la suite savoir ajouter des "dots" a un slider pour pouvoir accéder aux images manuellement.

Voici un codepen de ce que j'ai déja : https://codepen.io/Dayka/pen/wvBvjQe


Merci d'avance pour votre aide

Bonjour,

#slideshow-anime figure:hover {animation-play-state:paused;}

devrait fonctionner (sans doute à adapter à ton css)

Pour les flèches et les dots, sans JavaScript (à moins d'une complexité sans rapport avec le projet), il faut abandonner.

Bongota a écrit :
Bonjour,

#slideshow-anime figure:hover {animation-play-state:paused;}

devrait fonctionner (sans doute à adapter à ton css)

Pour les flèches et les dots, sans JavaScript (à moins d'une complexité sans rapport avec le projet), il faut abandonner.

Bonsoir,
Merci pour ta réponse, j'ai essayer mais elle ne fonctionne pas

Je pense regarder donc pour ajouter du javascript pour mes dots.

Bonjour Dayka,
Il fait le faire sur le div qui a l'animation
Exemple :

#slideshow-livre .slider-livre:hover{animation-play-state:paused;}