.project {
    position: relative;
    height: 370px;
    width: 250px;
    background-position: center;
    background-size: cover;
  }
  
  .project_description {
    height:100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(27, 27, 27, 0.70);
    color: #fff;
    visibility: hidden;
    opacity: 0;
  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    padding:10px;

    /* transition effect. not necessary */
    transition: opacity .2s, visibility .2s;
  }

  .project_description p {
      margin-bottom: 0;
  }
  
  .project:hover .project_description {
    visibility: visible;
    opacity: 1;
  }