Set styling on mouseout in CSS

Sometimes you might want to set stying on CSS on mouseout.

In the short example, let's take a look at how to achieve this. In this particualr example you will see transition styling applied on mouseout.

Step 1. Create a box using CSS

Step 2. The box will slide up slowly on hover using transition

Step 3. The box will slide back down slowly on mouseout using transition

Here is the HTML that will be used in this example:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wecode101 apply css styling on mouseout</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="col-9 pt-5 mx-auto">
        <div class="box">Lorem ipsum dolor amet whatever woke cronut, farm-to-table church-key tousled edison bulb. </div>
        </div>
    </div>
</body>
</html>

CSS

Create the box

.box {
  height: 150px;
  width: 200px;
  background-color: #ffffff;
  color: #000000;
  border:1px solid #000000;
  padding: 10px;
}

Slide up slowly on hover

.box:hover {
   margin-top:-4%;
   -moz-transition: margin-top .5s ease-in;
   -o-transition: margin-top  .5s ease-in;
   -webkit-transition: margin-top  .5s ease-in;
   transition: margin-top  .5s ease-in;
}

Slide down on mouseout

.box:not(:hover) {
   -moz-transition: margin-top .5s ease-out;
   -o-transition: margin-top  .5s ease-out;
   -webkit-transition: margin-top  .5s ease-out;
   transition: margin-top  .5s ease-out;
}

Set styling on mouseout in CSS

How to set styling on mouseout using CSS

Set styling on mouseout in CSS

How to set styling on mouseout using CSS