How to enlarge a specific container in CSS Sliders?

HTML-CSS
1

I’m writing a program where there’s a CSS Slider with 3 containers, each with an image and text below it. I’m trying to have the first div container enlarged as soon as i open the page but when i scroll to the next div, the first div container reduces in size and the next container is enlarged. Here’s how the code is looking:


<div class="container">
  <div class="ik5">
    <img src="igk/phone.png" alt="">
    <span> yer <br> £6</span>
  </div>
  <div class="ik5">
    <img src="igk/uj.png" alt="">
    <span> D6 <br> 60</span>
  </div>
  <div class="ik5">
    <img src="igk/yh.png" alt="">
    <span> Hps <br> 64</span>
  </div>
</div>

.container {
  margin: 30px 0 0 60px;
  width: 40%;
  height: 40%;
  display: flex;
  justify-content: center;
}

.container img {
  width: 6%;
  object-fit: cover;
  border-radius: 9px;
  border: 2px solid transparent;
  transition: all ease-in-out 0.5s;
  display: flex;
}

.container .ik5:hover img {
  width: 100%;
}

.ik5 span {
  opacity: 0.2;
  font-size: 1.3vw;
  transition: all ease-in-out 0.5s;
  justify-content: center;
  align-items: center;
}

.ik5:hover span {
  opacity: 1.1;
  font-size: 3vw;
  }
2

Hi. You have a number of open topics on this issue. Please can you update the previous topics with further queries on the same issue. I’ll go ahead and close this post.