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)");
}
);
});
Output:
Comments 0
Hossi
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
Living Phat3
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?