CSS: Add fixed number of pixels to width and height on hover-CodePudding

How can I add a fixed number of pixels to the initial height of an element?

Pseudo-CSS:

.zoom {
  padding: 0px;
  transition: transform .2s;
  margin: 0 auto;
}

.zoom:hover {
  width: <initial-width>   4px;
  height: <initial-height>   4px;
}

When I use transform: scale(...) instead, the resulting difference is dependent of the initial size of the element, which I don't want. I am intending to use this on buttons and their initial size will depend on the contents on them.

Also, I don't want the contents to scale with the button.

In the following snippet you see the problem:

.container {
  margin:  10px 100px 10px 100px;
}

.zoom {
  padding: 0px;
  transition: transform .2s;
  margin-top: 10px
}

.zoom:hover {
  transform: scale(1.2); 
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  
<div >
<button type="button" >Short content</button><br />
<button type="button" >Very very very very very very very very very long content</button>
</div>

</body>
</html>

EDIT:

In fact, I want a look like transform: scale() (in terms of not affecting the neighbors), but by a number of pixels in each direction and not by a factor.

CodePudding user response：

You can add padding-block to your element on hover if you want to increase just the height and maintain its original width.

.container {
  margin:  10px 100px 10px 100px;
}

.zoom {
  padding: 0px;
  transition: transform .2s;
  margin-top: 10px;
  transition: 0.2s padding; /* Add this for smooth transition of height */
}

.zoom:hover {
  padding-block: 20px;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  
<div >
<button type="button" >Short content</button><br />
<button type="button" >Very very very very very very very very very long content</button>
</div>

</body>
</html>

CodePudding user response：

You can get the final result using just CSS but there is a little wrinkle during the transition.

This snippet is put here in case it helps in your specific situation, and hopefully someone can refine it (probably with JS).

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .container {
      margin: 10px 100px 10px 100px;
    }
    
    .zoom {
      padding: 0px;
      transition: all .2s linear;
      --margintop: 10px;
      margin-top: var(--margintop);
    }
    
    .zoom:hover {
      --padding: 2px;
      padding: var(--padding);
      --minuspadding: calc(-1 * var(--padding));
      margin: calc(var(--margintop)   var(--minuspadding)) var(--minuspadding) var(--minuspadding);
    }
  </style>
</head>

<body>

  <div >
    <button type="button" >Short content</button><br>
    <button type="button" >Very very very very very very very very very long content</button>
  </div>
</body>

</html>

The hovered element has padding set to 2px which will increase its width and height by 4px overall. To compensate for that its margins are set with the relevant amounts so that the following elements' positions aren't affected.

CSS variables are used to specify the initial margin top (you have it as 10px) and the extra padding required (2px) just to make it easier for you to change these amounts if you want. CSS calc is then used to calculate the adjusted margins.

The wrinkle during the transition is that for a split second the following elements positions are affected but they end up in the right place.