How to make input button checkbox use up/down arrow keys instead

i am working with a zoom image code made from css only (i think it's css3 since it uses 3d scale transforms), that uses input buttons to control which image is zoomed. it does this by the input button "Checking" the box (invisibly, of course) of the image that will be zoomed when the corresponding input button is pressed.
i'd like the input button functions to be done by the up / down arrow keys on the keyboard, instead, and to have the up/down arrow keys animate between 2 images when either the up or down arrow key is pressed and held down and to have the zoom function stop zooming if the arrow keys are not being held down. is this possible? if the zoom stopping is not possible, is it possible for the animating of the two images to stop once the zoom for any particular image finishes and then restart once the arrow key in question is released and re-pressed? i think i said that right lol

here's the code with the input buttons i'd like to modify.
https://codepen.io/ge1doot/pen/XXJNov