How do i enlarge the first image in a CSS Slider?

I'm looking for a way to enlarge the first image of a CSS Slider when i hover but when i scroll to the next, the first image becomes small and the next is big. As of now, the slider only enlarges an image if i click on it but i want the first one to be enlarge as soon as i open the page.

Here's how the code is looking:

.container {
  margin: 40px 0 0 50px;
  width: 70%;
  height: 50vw;
  display: flex;
  justify-content: center;
  gap: 3%;
}

.container img {
  width: 5%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: all ease-in-out 0.5s;
}

.container img:hover {
  width: 50%;
}

<div class="container">
  <img class="iwk" src="images/Phone Accessories/iwalkk.png" alt="">
  <img src="images/Phone Accessories/Iwalk_C-removebg-preview.png" alt="">
  <img src="images/Phone Accessories/jbl head.png" alt="">
</div>

You can use the combination of :not and :has pseudo-classes to expand the first image as long as no image is hovered:

.container:not(:has(img:hover)) img:first-child

.container {
  margin: 40px 0 0 50px;
  width: 70%;
  height: 50vw;
  display: flex;
  justify-content: center;
  gap: 3%;
}

.container img {
  width: 5%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: all ease-in-out 0.5s;
}

.container img:hover, .container:not(:has(img:hover)) img:first-child {
  width: 50%;
}

<div class="container">
  <img class="iwk" src="https://picsum.photos/id/235/200/300" alt="">
  <img src="https://picsum.photos/id/236/200/300" alt="">
  <img src="https://picsum.photos/id/237/200/300" alt="">
</div>