How do i enlarge the first item in a CSS Slider when you hover then make it small when you scroll to the next?

HTML-CSS
1

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

.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%;
}

2

Do you have the html?

3

This is the HTML:

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

you will need to share all your code

5

That’s all my code:

HTML:

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

CSS:

.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%;
}