Когда пользователь нажимает кнопку-переключатель, скрывает все остальные параметры и позволяет увеличить и анимировать метку?

Question

Я пытаюсь создать систему рейтинга на основе смайликов,

Во-первых, мне было интересно, как я могу сделать так, чтобы значок ярлыка / смайлика немного увеличивался при наведении, чтобы он стал больше других?

Во-вторых, когда вы нажимаете одну из радиокнопок, могу ли я скрыть все неотключенные радиокнопки, а затем анимировать метку, на которую нажали, чтобы увеличить изображение?

 <div class ="rating text-center  left-20" style="display: flex;">
               <div class="checkboxgroup">
                <input id="box1-fac-radio" type="radio" name="rad" value="1" style="visibility:hidden">
                <label for="box1-fac-radio"><i class ="twf twf-pensive twf-4x"></i></label>
                        </div>
                         <div class="checkboxgroup">
             <input id="box1-fac-radio1" type="radio" name="rad" value="2" style="visibility:hidden">
             <label for="box1-fac-radio1"><i class ="twf twf-neutral-face twf-4x"></i></label>
                      </div>
                       <div class="checkboxgroup">
             <input id="box1-fac-radio2" type="radio" name="rad" value="3" style="visibility:hidden">
             <label for="box1-fac-radio2"><i class ="twf twf-satisfied twf-4x"></i></label>
                 </div>
                  <div class="checkboxgroup">
                <input id="box1-fac-radio3" type="radio" name="rad" value="4" style="visibility:hidden">
               <label for="box1-fac-radio3"><i class ="twf twf-grin twf-4x"></i></label>
                  </div>
                   <div class="checkboxgroup">

             <input id="box1-fac-radio4" type="radio" name="rad" value="5" style="visibility:hidden">
            <label for="box1-fac-radio4"><i class ="twf twf-heart-eyes twf-4x"></i></label>

          </div>

спасибо