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

Question

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!

score 10 · Accepted Answer · answered Jul 17 '20 at 13:39

10

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>

answered Jul 17 '20 at 13:39

Jeremy Thille

26,047
12
43
63

1

Nice solution! I never thought of using the `:active` selector for this – Nico Shultz Jul 17 '20 at 13:43
ooo, thanks a lot! didn't think of that (also didn't know about that). I'm kind of new to website making and just starting to make my own projects, so that helped a lot <3 – SAndreeaM Jul 17 '20 at 13:55

score 2 · Answer 2 · answered Jul 17 '20 at 13:38

2

Try

transform: scale(0.7)

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

answered Jul 17 '20 at 13:38

BloodyMonkey

1,572
1
9
15

score 2 · Answer 3 · answered Jul 17 '20 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>

score 2 · Answer 4 · answered Jul 17 '20 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">

I assumed you want the click event on your body, not the image - looking at your question again, this solution is different. — Daniel Sixl, Jul 17 '20 at 13:54

score 1 · Answer 5 · answered Jul 17 '20 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>

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

5 Answers5