Как реализовать hover?

.main { 
  position: relative; 
  width: 400px; 
  height: 400px; 
  background: url("https://dox.forqy.website/shop/wp-content/uploads/sites/33/2018/01/dox-tech-03-800x533.jpg"); 
  overflow: hidden; 
} 
 
.main:hover .text { 
  transform: translateY(0); 
} 
 
.text { 
  position: absolute; 
  width: 100%; 
  background: #1d1d1d; 
  height: 60%; 
  bottom: 0; 
  transform: translateY(100%); 
  transition: .3s ease-out 0s; 
}

<div class="main"> 
  <div class="text"></div> 
</div>