I have just started learning HTML 2 days ago and have stumbled upon something I have no clue how to do. I have a piece of text which creates a box with a title and a tiny bit of text. When the mouse hovers over it, it grows 1.05 times. I would like to add a function which when I click on the box, it makes the box grow to almost the whole width of the window and reveals a text in the box. How should I go about it?

<div class="games">
          <div class="game-list">
            <img src="https://rideawavedesign.com/wp-content/uploads/2021/06/dnd-dice-level-up-birthday-card-1.jpg" style="width:140px; height: 140px;"/ >
          <h1 style=" color:#FFFFFF">Chapter 1: </h1>
          <p style=" color:#FFFFFF; font-size: 20px">Step-by-Step</p>
          </div>
</div>

The code over is what I have on the main page

.games{
    display: flex;
    
    flex-wrap: wrap;
    align-items: center;
    /* background-color:    rgba(0, 0, 47,0.3); */
    justify-content: space-evenly;
}
.game-list{
    margin: 30px;;
    padding: 20px;
    height: 275px;
    width:325px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border:1px solid gray;
    background: rgba(255, 75, 255, 0.1);
    box-shadow: 0 8px 40px 0 rgba(45, 57, 231, 0.37);
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}
.game-list:hover{
    transform: scale(1.05);
}

And this code is the CSS functions
(Also, I would like to mention that I started learning CSS and HTML a couple of days ago so please dumb it down a bit so I can understand)

I tried looking up a bit how to do this but for most of it I didnt understand if it was what I was looking for or not. So I turn here so I can get a direct answer.