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

Question

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

106 Views Asked by SAndreeaM At 17 July 2020 at 13:29

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!

Original Q&A

There are 5 best solutions below

BloodyMonkey On 17 July 2020 at 13:38

Try

transform: scale(0.7)

instead of height. It will be centered and it's more efficient (GPU usage)

Aurore On 17 July 2020 at 13:44

This should work:

$(document).ready(function() {
    $("#banana").mousedown(function() {
    
        $("#banana").css("height","50vh");
    
    });
    
    $("#banana").mouseup(function() {
    
        $("#banana").css("height","100vh");
    
    });
});

.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.0/jquery.min.js"></script>
<body>
    
        <div class = "centered">
            <img id = "banana" src="https://www.chiquita.com/wp-content/uploads/2019/12/Chiquita_Banana_Class_Extra_Yellow.jpg" alt="banana.png">
        </div>
    
</body>

DCR On 17 July 2020 at 13:45

place the LMB on the image not the div and use width not height

$(document).ready(function() {
    $("#pic").mousedown(function() {
    
    
        $("#pic").css("width","70%");
    
    });
    
    $("#pic").mouseup(function() {
   
    
        $("#pic").css("width","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 id='pic' src="https://picsum.photos/300" alt="banana.png">
        </div>
    
</body>

Daniel Sixl On 17 July 2020 at 13:47

Add and remove a class to your body and transform your image indirectly:

$(document).ready(function() {

  const body = $('body');
  const cssClassClicked = 'lmb-clicked';

  body
    .mousedown(function() {
      body.toggleClass(cssClassClicked)
    })
    .mouseup(function() {
      body.toggleClass(cssClassClicked)
    });

});

body {
  min-height: 100vh;
  background: #eee;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.img {
  display: block;
  transition: transform 300ms ease-in-out;
  will-change: transform;
}

.lmb-clicked .img {
  transform: scale(0.9);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img class="img" src="https://picsum.photos/id/1/400/300">

**Jeremy Thille** · Accepted Answer · 2020-07-17T13:39:04.660000

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>

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

There are 5 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in JQUERY

Related Questions in CSS

Related Questions in JQUERY-CLICK-EVENT

Trending Questions

Popular # Hahtags

Popular Questions