Using only JQuery you can use the hover() listener for mouseenter and mouseleave events and manage the CSS properties also with JQuery using css() method. For scaling an element you can use the CSS transition in conjunction with transform: scale(<some_number>) properties. Check next example for better understanding:
HTML :
<script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="col-lg-6 order-lg-2">
<div class="img-wrapper p-5 text-center bg-info">
<img class="img-fluid rounded-circle" src="https://picsum.photos/200/300/?random" alt="Askbootstrap.com">
</div>
</div>Javascript/Jquery:
$(document).ready(function()
{
$(".img-wrapper").find("img").css("transition", "transform 500ms ease-in-out");
$(".img-wrapper").hover(
// Handler for mouseenter
function()
{
$(this).find("img").css("transform", "scale(1.2)");
},
// Handler for mouseleave
function()
{
$(this).find("img").css("transform", "scale(1)");
}
);
});