js/plugins/hoverdir/css/style.css

.da-thumbs {
    position: relative;
}

.da-thumbs article {
    position: relative;
    margin-bottom:1px;
}

.da-thumbs article a,
.da-thumbs article a img {
    display: block;
    position: relative;
}

.da-thumbs article a {
    overflow: hidden;
}
.da-thumbs article a div {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
/*    background-color: black;*/
}

.da-thumbs article a div span{
    /*margin-top:24%;*/
}

/*
.da-thumbs article.masoneryBloc  a div{
        width: 91%;
        height: 55%;
        margin: 10px;
        background-color: rgba(255, 255, 255, 0.5); (this is the semi transparent color of your overlay that you can change to what you want)
}
*/

.da-thumbs article a div{
   /* padding-top:10%; */
}

.da-thumbs article a div.da-animate {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
/* Initial state classes: */
.da-slideFromTop {
    left: 0px;
    top: -100%;
}
.da-slideFromBottom {
    left: 0px;
    top: 100%;
}
.da-slideFromLeft {
    top: 0px; 
    left: -100%;
}
.da-slideFromRight {
    top: 0px;
    left: 100%;
}
/* Final state classes: */
.da-slideTop {
    top: 0px;
}
.da-slideLeft {
    left: 0px;
}
.da-thumbs li a div span {
    display: block;
    padding: 10px 0;
    margin: 40px 20px 20px 20px;
    text-transform: uppercase;
    font-weight: normal;
    color: rgba(255,255,255,0.9);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 -10px 0 rgba(255,255,255,0.3);
}