html5 css resim ölçeklendirme yardım

merhaba arkadaşlar kendimce site geliştirmeye çalışıyorum da

ben şu örnek sitedeki gibi https://webmaster.kitchen/ kutular içinde resmin üzerinde başlık olan fare ile üzerine gelince hafiften resim büyüyor o yapıyı öğrenmeye çalışıyorum div id si vce-featured-grid

kendimce denediğim yöntemler

HTML Kod:

<div id="box">

        <img src="https://w.wallhaven.cc/full/8o/wallhaven-8o5591.jpg">

        <h2>Lorem, ipsum.</h2>

</div>

CSS Kod:

*{margin: 0px; padding: 0px; box-sizing: border-box;}

#box{

    width: 500px;

    height: 500px;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: tomato;

}

#box img{

    width: 500px;

    height: 500px;

}

#box h2{

    position: absolute;

    color: white;

    text-shadow: 2px 2px 3px black;

}

JS JQuery Kod:

$(function() {

            $("#box").click(function() {

                $("#box img").css({

                    width:"600",

                    height:"600"

                })

            });

        });

bu yöntem ile dive 500x500 px değer verdim js ile tıklama olayı gerçekleşirse resmi hafiften büyüteyim dedim verdiğim örnek sitedeki gibi bu seferde resim div den taştı overflow: hidden denedim ama beceremedim bir türlü yardım lütfen

boşun aytırmışın kendini

 hover {

       transform: scale(1.2);

   }