<div id="left" class="bg-example">
  <h3>hover</h3>
  <div>i'm solid</div>
</div>
<div id="right" class="bg-example">
  <h3>hover</h3>
  <div>i'm gradient</div>
</div>

.bg-example {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  &#left { left: 0; }
  &#right { right: 0; }
  
  text-align: center;
  padding-top: 40px;
  font-family: Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  
  transition: all 500ms ease-in-out;
}

#left {
  background: #f1c40f;
  color: #2c3e50;
  &:hover {
    background: #27ae60;
    color: #ecf0f1;
  }
}

#right {
  background: linear-gradient(45deg, #2980b9, #8e44ad);
  color: #ecf0f1;
  &:hover {
    color: #2c3e50;
    background: linear-gradient(135deg, #ecf0f1, #f1c40f);
  }
}