#window_10 {
    position: relative;
    width: 600px;
    height: 600px;
    overflow: hidden;
    margin: 50px auto;
    background: #444;
    box-shadow: 0 0 15px rgba(0, 0, 0, 1);
}

#all_10 {
    display: flex;
    width: 6000px; /* 10 × 600 */
    height: 600px;
    animation: slide10 30s steps(10, end) infinite;
}

#window_10:hover #all_10 {
    animation-play-state: paused;
}

#window_10:hover::after {
    content: "▌▌";
    position: absolute;
    top: 15px;
    right: 15px;
    color: #bbb;
    opacity: .6;
    font-size: 22px;
    text-shadow: -1px -2px 3px #fff, 1px 2px 3px #000;
}

#all_10 span {
    display: block;
    flex: 0 0 600px;
    width: 600px;
    height: 600px;
}

#all_10 span a {
    display: block;
    width: 100%;
    height: 100%;
}

#all_10 span img {
    display: block;
    width: 600px;
    height: 600px;
    object-fit: cover;
}

/* 10 Bilder × 3 Sekunden = 30 Sekunden */
@keyframes slide10 {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-6000px);
    }
}