.project-image-container {

    position: relative;

    display: inline-block;

}



.project-image-overlay {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: rgba(0, 0, 0, 0.5);

    opacity: 0;

    transition: opacity 0.5s;

    display: flex;

    justify-content: center;

    align-items: center;

}



.project-image-container:hover .project-image-overlay {

    opacity: 1;

}



.project-image-overlay p {

    color: #fff;

    font-size: 20px;

    text-align: center;

}

@media screen and (max-width: 768px){
    .project-image-overlay p {

        color: #fff;
    
        font-size: 12px;
    
        text-align: center;
    
    }
}