Превращение блоков в друг друга

.card * 
{ 
  width: 100%; 
  transition: 0.5s all; 
  position:absolute; 
} 
.card  
{ 
  position:relative; 
} 
 
.red  
{ 
  background:red; 
  color: white; 
} 
 
.green  
{ 
  background:green; 
  color: white; 
  visibility: hidden; 
    opacity: 0; 
} 
 
.card:hover .red 
{ 
  opacity: 0; 
  visibility: hidden; 
} 
.card:hover .green 
{ 
  opacity: 1; 
  visibility: visible; 
}

<div class = "card"> 
  <div class = "red">Красные поля</div> 
  <div class = "green">Зеленые поля</div> 
</div>