.image-container {
position: relative;
}
.image-container::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,255,0.2);
opacity: 0;
transition: opacity 0.3s;
}
.image-container:hover::after {
opacity: 1;
}


    /********* Superposition simple de texte sur une image *******/
    /* Conteneur principal */
    .overlay-image {
     position: relative;
     width: 300px;
    }
    /* Image originale */
    .overlay-image .image {
     display: block;
     width: 100%;
     height: auto;
    }
    /* Texte original */
    .overlay-image .text {
     color: #fff;
     font-size: 30px;
     line-height: 1.5em;
     text-shadow: 2px 2px 2px #000;
     text-align: center;
     position: absolute;
     top: 90%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
    }



    /********* Hover image et texte *******/
    /* Overlay */
    .overlay-image .hover {
     position: absolute;
     top: 0;
     height: 100%;
     width: 100%;
     opacity: 0;
     transition: .5s ease;
    }
    /* Apparition overlay sur passage souris */
    .overlay-image:hover .hover {
     opacity: 1;
    }



    /********* Hover background et texte uniquement *******/
    .overlay-image .normal {
     transition: .5s ease;
    }
    .overlay-image:hover .normal {
     opacity: 0;
    }
    .overlay-image .hover {
     background-color: rgba(0,0,0,0.5);
    }