.box {
  height: 200px;
  width: 200px;
  background-image: url(https://i.postimg.cc/gJrm7Kyk/nXupqk.jpg);
  background-position: center;
  background-size: cover;
  position: relative;
}
.box:before {
  content: '美食當前';
  color: white;
  font-weight: 600;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
  transform: translateX(-200px);
  transition:all .5s;
}
.box:hover{
  cursor: pointer;
}
.box:hover::before {
  transform: translateX(0);
}