CSS Hover Effect: Make a Div Jump on Mouseover

This is a simple way to achieve the effect:

1. Define a hover pseudo-class in CSS to set the div's transform property to translateY(-10px) when the mouse is over the div.

div:hover {
  transform: translateY(-10px);
}

2. Add a div element in your HTML and style it.

<div class='box'>Hover me!</div>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  transition: transform 0.3s ease-in-out;
}
</style>

3. The div will jump up by 10 pixels when the mouse hovers over it.

Here's the complete code:

<div class='box'>Hover me!</div>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  transition: transform 0.3s ease-in-out;
}

.box:hover {
  transform: translateY(-10px);
}
</style>