Click on the red square to see the effect
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 200px;
position: relative;
background-color: #f1f1f1;
}
.square {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
cursor: pointer;
}
.square:hover ~ .moving-square {
animation: move-up 1s ease-in-out forwards;
}
@keyframes move-up {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100px);
}
}
.moving-square {
width: 50px;
height: 50px;
position: absolute;
background-color: blue;
top: 200px;
}
</style>
</head>
<body>
<h2>Click on the red square to see the effect</h2>
<div class="container">
<div class="square"></div>
<div class="moving-square"></div>
</div>
</body>
</html>
