css - コンテナに画像を並べて入れたいが、改行が抜けない

Question

画像コンテナを別のコンテナに入れようとしていますが、最終的には 1 つの行に多くなるでしょう。今のところ 4 つ持っています。

私の問題は、マウスオーバーで変化している間に、最終的にコンベヤーベルトのように画面上を移動したいということです。

したがって、画面の終わりのために非表示になっているものはカットされており、行を離れないことが重要です。nowrap を使用しても、常に別の行に移動する理由がわかりません。

誰かがベルトコンベアを作るための簡単なトリックを持っていれば、私も感謝します. 私のjavascriptも機能しません。

<style>
#container {
background: transparent;
position: relative;
overflow:hidden;
white-space: nowrap;
width: 100%;
margin: 0px auto;
height: 450px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

#foto1 {
height: 450px;

display: inline;
vertical-align: top;
float: none;
white-space: nowrap;
content: url("images/ruecken.jpg");
}
#foto1:hover { content: url("images/image-2.jpg");
}
#foto1:active { content: url("images/image-3.jpg");
}

#foto2 {
height: 450px;

 display: inline;
vertical-align: top;
float: none;
white-space: nowrap;
content:url("images/Ruecken.jpg");
}
#foto2:hover { content: url("images/image-3.jpg");
}
#foto2:active { content: url("images/image-4.jpg");
}

#foto3 {
height: 450px;

display: inline;
vertical-align: top;
float: none;
white-space: nowrap;
content:url("images/Ruecken.jpg");
}
#foto3:hover { content: url("images/image-5.jpg");
}
#foto3:active { content: url("images/image-6.jpg");
}

#foto4 {
height: 450px;

display: inline;
vertical-align: top;
float: none;
white-space: nowrap;
content:url("images/ruecken.jpg");
}
#foto4:hover { content: url("images/image-4.jpg");
}
#foto4:active { content: url("images/image-5.jpg");
}

</style>