Search code examples
javascripthtmljquerycssjquery-click-event

How to make image/div smaller when LMB is being pressed?

So, I have an image in the middle of the page (where I want it to remain) and while I hold the LMB I want it to get a little bit smaller, then go back to its previous size when released.

Below the code:

$(document).ready(function() {
        $("#banana").mousedown(function() {
            $("#banana").css("height","70%");
        });
        
        $("#banana").mouseup(function() {
            $("#banana").css("height","100%");
        });
    });
    .centered {
        text-align: center;
        display: block;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div id = "banana" class = "centered">
            <img src="https://via.placeholder.com/150" alt="banana.png">
    </div>
</body>

I tried get that target using jQuery (but the position of the image changes and it is not centred anymore).

Thanks in advance!

Solution

  • This is very easy to do with CSS only, using the :active pseudo-selector (that corresponds to "mousedown"). Also why not use Flex for easy centering.

    .container {
  border: #00f solid 1px;
  width: 250px;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container img {
  transition: all 0.3s ease-in-out;
  transform: scale(1);
}
.container img:active {
  transform: scale(0.8);
}
    <div class="container"><img src="https://via.placeholder.com/150"/></div>