Hover in Image with Boostrap

I tried to make a simple hover of resizing with the image but it did not just come out, I leave CSS and HTML code:

.baseNumeros {
    z-index:4;
}

.RNumeros {
    width: 100%;
    height: 100%;
    transition: transform .2s;
}

.RNumeros:hover {
    transform: scale(1.5); 
}

.PNumeros {
    color:black;
}

.BarraNumeros {
    width: 200px;
    margin-top: 20px;
    border:black 2px solid;
    box-shadow: 0 10px 6px -6px black;
}

        <div class="container-fluid base">
            <div class="row ">
                <div class="col-sm-4 baseNumeros" >
                    <img class="RNumeros" src="~/css/imatges/ReinoNumeros.png">
                    <div class="progress BarraNumeros center-block">
                            <div class="progress-bar progress-bar-info progress-bar-striped active PNumeros" 
                            role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" 
                            style="width:40%">
                            40%
                            </div>
                    </div>
                </div>
                <div class="col-sm-4" style="background-color:lavenderblush;">Reino 2</div>
                <div class="col-sm-4" style="background-color:lavender;">Reino final</div>
            </div>
        </div>