body {
    background-color: black;
    font-family: sans-serif;
}

.schattenmitfarbverlauf {
    width: 1150px; /* relativ ist auch möglich mit z.B. 60% */
    height: 810px;
    margin: 50px auto;
    background-image: url(rosenpapagai.jpg);
    position: relative;
    border-radius: 15px;
}

.schattenmitfarbverlauf:before,
.schattenmitfarbverlauf:after {
    content: "";
    position: absolute;
    background: linear-gradient(45deg, red, orange, yellow, 
       green, blue, indigo, violet);
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);  
    top: -2px;
    left: -2px;
    background-size: 500%;
    animation: wandernderFarbverlauf 30s linear infinite;
    border-radius: 15px;
}

.schattenmitfarbverlauf:after {
    filter: blur(25px);
}

@keyframes wandernderFarbverlauf {
    0%   { background-position: 0 0 }
    50%  { background-position: 500% 0 }
    100% { background-position: 0 0 }
}



main:hover .translateXY {
	transform: translate(calc(100% + 20px), 350px);
}

main:hover .translateX {
	transform: translatex(calc(100% - 4000px));
}

main:hover .translateY {
	transform: translate(calc(100% - 200px), -350px)
}

.box {
	border-radius: 10px;
	box-shadow: 1px 1px 10px 0;
	padding: 1rem;
	transition: all 2s;
    width: 400px;
    height: 200px;
}

.translateXY {
	background-image: url("
jacki1.jpg");
    background-size: 100%;
	color: #c9bd17;
}

.translateX {
	background-image: url("
rosen.jpg");
    background-size: 490px 300px;
    color: hsl(128, 79%, 44%);
}

.translateY {
	background-image: url("
frucht.jpg");
    background-size: cover;
	color: rgb(253, 122, 15);
}

main {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1em;