Не знаю как сделать оверлей

.teaser{ 
  width:200px; 
  height:200px; 
  position:relative; 
  overflow:hidden; 
  background:url(https://millionstatusov.ru/pic/statpic/all/58e61335ec518.jpg) no-repeat center/cover; 
} 
.teaser__overlay{ 
  position:absolute; 
  top:100%; 
  left:0; 
  width:100%; 
  height:100%; 
  background-color:rgba(0,0,0,.4); 
  opacity:0; 
  color:#fff; 
  display:flex; 
  justify-content:center; 
  align-items:center; 
  transition:all .4s ease-out; 
} 
.teaser:hover .teaser__overlay{ 
  top:0; 
  opacity:1; 
} 
.teaser__link{ 
  color:inherit; 
  text-decoration:none; 
}

<div class="teaser"> 
  <div class="teaser__overlay"> 
    <a href="#" class="teaser__link">Перейти к галерее</a> 
  </div> 
</div>

*{ 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
.pict{ 
  display: inline-block; 
  position: relative; 
} 
.pict > img{ 
  display: block;   
} 
.pict:before{ 
  content: ''; 
  position: absolute; bottom: 0; left: 0; 
  width: 100%; 
  height: 0; 
  background: rgba(0,0,0,.7); 
  transition: height .3s ease; 
} 
.pict:hover:before{ 
  height: 100%; 
} 
 
.pict a{ 
  position: absolute; top: 100%; left: 50%; 
  transform: translate(-50%, -50%); 
  opacity: 0; 
  color: #fff; 
  transition: all .5s ease; 
} 
 
.pict:hover a{ 
  opacity: 1; 
  top: 50%; 
}

<div class="pict"> 
  <img src="http://via.placeholder.com/200x200"> 
  <a href="#">Link</a> 
</div>