.portrait {
  width: 500px;
  height: 500px;
  position: relative;
  overflow: hidden;
}
img {
  transition:.3s all ease;
}
.portrait:hover img {
  transform:scale(1.15);
  transition:1s all ease;
}
.portrait::before {
  content:'';
  position: absolute;
  background:black;
  border:1px solid #fff;
  opacity:0;
  z-index:1;
  top:50%;
  left:50%;
  width: 0;
  height: 0;
  transform:translate(-50%,-50%);
  transition:.3s all cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.portrait:hover::before {
  opacity:0.6;
  width: 400px;
  height: 400px;
  transition:.3s all cubic-bezier(0.68, -0.6, 0.32, 1.6) .5s;
}
.portrait div {
  color:#fff;
  font-size: 40px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  text-align: center;
  z-index:2;
  opacity:0;
  transition:.1s all cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.portrait:hover div {
  opacity:1;
  transition:.3s all cubic-bezier(0.68, -0.6, 0.32, 1.6) 1s;
}