Simple hover effect in CSS

Step 1

In html create a div with a class of box.

<div class="box"></div>

Step 2

Add css for the box with a transition of .5s.

.box { width: 400px;

height: 400px;

margin: auto;

background: teal;

display: flex;

transition: .5s;

}

Step 3

Make it lift up on hover.

.box:hover { -webkit-transform: translateY(-12px);

-moz-transform: translateY(-12px);

-ms-transform: translateY(-12px);

-o-transform: translateY(-12px);

transform: translateY(-12px);

}

Example

hover me

Codepen