1 
 2<div class="container">
 3  <div class="card-body">
 4    <div class="card">
 5      <img src="https://4kwallpapers.com/images/walls/thumbs_2t/20822.png" />
 6    </div>
 7    <div class="card">
 8      <img src="https://4kwallpapers.com/images/walls/thumbs_2t/22582.png" />
 9    </div>
10    <div class="card">
11      <img src="https://4kwallpapers.com/images/walls/thumbs_2t/17605.png" />
12    </div>
13    <div class="card">
14      <img src="https://4kwallpapers.com/images/walls/thumbs_2t/25015.jpg" />
15    </div>
16    <div class="card">
17      <img src="https://4kwallpapers.com/images/walls/thumbs_2t/18785.jpg" />
18    </div>
19  </div>
20</div>          

 1 
 2body {
 3  margin: 0;
 4}
 5.container {
 6  padding: 0;
 7  box-sizing: border-box;
 8  height: 100vh;
 9  display: flex;
10  justify-content: center;
11  align-items: center;
12  background-color: #151f28;
13}
14 
15.card-body {
16  width: 70%;
17  max-width: 800px;
18  height: 400px;
19  display: flex;
20  justify-content: center;
21  align-items: stretch;
22  gap: 1.25rem;
23  transition: all 400ms;
24}
25 
26.card {
27  flex: 1;
28  height: 100%;
29  transition: all 400ms;
30  cursor: pointer;
31}
32.card > img {
33  display: block;
34  width: 100%;
35  height: 100%;
36  object-fit: cover;
37}
38 
39.card {
40  flex: 1;
41  height: 100%;
42  transition: all 400ms;
43  cursor: pointer;
44}
45.card:nth-child(odd) {
46  translate: 0 -20px;
47}
48.card:nth-child(even) {
49  translate: 0 20px;
50}
51.container:hover .card:not(:hover) {
52  filter: grayscale(100%);
53}
54.card:hover {
55  flex: 3;
56}