Responsive grid with CSS Grids

Responsive grid with CSS Grids

HTML

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title>Testing</title>
	<link rel="stylesheet" href="test-style.css">
    </head>

    <body>
	<div id="test">
	    <img id="banana" src="https://i.imgur.com/D9TI3VT.jpg">
	    <img id="cat" src="https://i.imgur.com/j8gJnFq.jpg">
	</div>
    </body>
</html>

CSS

#test{
    position:relative;
    width:auto;
    height:600px;
    Background:lightblue;
    margin:auto;
}

#cat{
    position:absolute;
    left:150px;
    top:0;
    animation-name:cat;
    animation-duration:2s;
    animation-delay:0s;
    animation-play-state:paused;
}

#banana:hover #cat{
    animation-play-state:running;
}
@keyframes cat{
    0%{
	left:150px;
    }
    100%{
	left:250px;
    }
}