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)");
}
);
});
Thank you, this worked, but what would I do if i have multiple pictures next to each other, and what i want is for the one that is being enlarged for it to be on the top layer so it over laps all other images? How would i do this?
Recently I saw your grocery theme its awesome ..
Jquery :
function mOver(Jeese) {
$(Jeese).mouseover(function () {
$(this).animate({
height: ‘+=25px’,
width: ‘+=25px’,
left: ’50’,
top: ’50’,
// clearQueue ??
}, 500, ‘easeOutCirc’).clearQueue;
});
$(Jeese).mouseout(function () {
$(this).animate({
height: ‘-=25px’,
width: ‘-=25px’,
left: ’50’,
top: ’50’
// clearQueue ??
}, 500, ‘easeOutCirc’).clearQueue;
});
};
mOver(‘img’);
HTML:
How can I make the image inside of this div scale without the actual div scaling on hover using JQ. It works but the whole of div become scale not only image
Thank you for this example! I have been stuck on the :hover pseudo class, trying to find out why it wouldn’t work with just CSS. I use it on my blog in Tumblr, so apparently I learned that Tumblr is limited as to which code(s) you can use. I learned that CSS can’t be used inline, as I had it. Really strange, ha 🙂