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

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