CSS for floatable item

index.html

<div class="header">

<h3>Example of floatable</h3>

</div>

<div class="card floatable">

  <h4>
  Hover me!
  </h4>
  
</div>

main.css

.header {
  width: 100%;
  height: 40px;
}

.card {
	width: 100px;
    height: 100px;
	border: 1px solid rgba(0, 0, 0, 0.125);
  	border-radius: 0.5rem;
}

/* 
| core code 
*/

.floatable {
  margin-top: 5px;
  margin-bottom: 0;
  box-shadow: none;
  transition: margin 0.1s ease-out;
}

.floatable:hover {
  cursor: pointer;
  margin-top: 0;
  margin-bottom: 5px;
  box-shadow: 0 5px 5px #00000050;
}

/*
| end of core code 
*/