Revision history [back]

You can make a div perform both a scale animation on hover and a translateY animation simultaneously by using CSS transitions and transforms.

Here is an example CSS code:

div {
  transition: transform 0.3s ease;
  transform-origin: center;
}

div:hover {
  transform: scale(1.2) translateY(-20px);
}

In this code, we set a transition property on the div element with a duration of 0.3 seconds and an easing function. We also set the transform-origin property to the center of the div, which will be used as the pivot point for the scale animation.

On hover, we use the transform property to apply both the scale animation and the translateY animation at the same time. The scale(1.2) value will increase the size of the div by 20%, while the translateY(-20px) value will move the div upwards by 20 pixels.

You can adjust the values of the scale and translateY properties to achieve the desired effect for your specific use case.