Не могу сделать hover

html, 
body { 
  width: 100%; 
  height: 100%; 
  padding: 0; 
  margin: 0; 
} 
 
.wrapper { 
  display: flex; 
  width: 100%; 
  height: 200px; 
  border: 1px solid red; 
  justify-content: space-around; 
  align-items: center; 
} 
 
.block { 
  width: 20%; 
  height: 150px; 
  line-height: 150px; 
  text-align: center; 
  color: transparent; 
  border: 1px solid blue; 
  transition: height 0.5s ease-out 0.5s, color 0.5s ease-out 0.5s, line-height 0.5s ease-out 0.5s; 
} 
 
.block:hover { 
  height: 200px; 
  line-height: 200px; 
  color: black; 
}

<div class="wrapper"> 
  <div class="block">BLOCK #1</div> 
  <div class="block">BLOCK #2</div> 
  <div class="block">BLOCK #3</div> 
  <div class="block">BLOCK #4</div> 
</div>