How can I achieve animated zoom on hover using CSS?

I'm currently working on a project and could use some assistance. I'm aiming to integrate a particular animation effect where, upon hovering over any of the four image selections in the project, I want them to dynamically zoom in and change angles, enhancing the visual experience. I'm hoping to achieve an effect similar to the example I provided. I've checked YouTube and Google, but can't find a guide or video on how to do it, Any guidance on implementing this would be greatly appreciated!

Example: zoomed in image when hover

here is my code:

<html>
  <head>
    <title>Hello, World!</title>
  </head>
  <style>
body {
  background-color: #eb3477;
}

.sel-btns {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
}

.box {
  margin-top: 100px;
}

.box {
  display: flex;
  border: solid;
  color: white;
  height: 50px;
  width: 65px;
  align-items: flex-end;
  border-radius: .5em;
  background: #d94c74;
}

img {
  position: relative;
  right: 45px;
  top: 5px;
  height: 150px;
  width: 150px;
}
  </style>
  <body>
    <div class='wrapper'>
      <div class="sel-btns">
        <div class="box">
          <a href="#"><img src='https://svgshare.com/i/13sL.svg' title='ice cream' /></a>
        </div>
        <div class="box">
          <a href="#"><img src='https://svgshare.com/i/13sL.svg' title='ice cream' /></a>
        </div>
        <div class="box">
          <a href="#"><img src='https://svgshare.com/i/13sL.svg' title='ice cream' /></a>
        </div>
        <div class="box">
          <a href="#"><img src='https://svgshare.com/i/13sL.svg' title='ice cream' /></a>
        </div>
      </div>
    </div>
  </body>
</html>

you can also run the code here!: https://jsfiddle.net/sofie_anne13/qt3Lvxn8/105/

Solution

You can read more about CSS 2D transform here and also CSS hover selector here.

The idea is when your mouse is hover on the ice-cream, you want to rotate and scale it bigger.

body {
  background-color: #eb3477;
}

.sel-btns {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  overflow: hidden; /* Add this line */
}

.box {
  margin-top: 100px;
}

.box {
  display: flex;
  border: solid;
  color: white;
  height: 50px;
  width: 65px;
  align-items: flex-end;
  border-radius: .5em;
  background: #d94c74;
}

img {
  position: relative;
  right: 45px;
  top: 5px;
  height: 150px;
  width: 150px;
}


/* Add these */

.ice-cream {
  transition: all .5s;
}

.ice-cream:hover {
  transform: rotate(12deg) translateX(5px) scale(1.2);
}

<html>
<body>
  <div class='wrapper'>
    <div class="sel-btns">
      <div class="box">
        <a href="#"><img src='https://svgshare.com/i/13sL.svg' title='ice cream' class='ice-cream' /></a>
      </div>
      <div class="box">
        <a href="#"><img src='https://svgshare.com/i/13sL.svg' title='ice cream' class='ice-cream' /></a>
      </div>
      <div class="box">
        <a href="#"><img src='https://svgshare.com/i/13sL.svg' title='ice cream' class='ice-cream' /></a>
      </div>
      <div class="box">
        <a href="#"><img src='https://svgshare.com/i/13sL.svg' title='ice cream' class='ice-cream' /></a>
      </div>
    </div>
  </div>
</body>

</html>