Change the hover effect to portfolio grid

Hi!
Please how can I show the titles of a portfolio grid when I put the mouse over the items? I have check the forums information and I just achieve to change the opacity of the items when I put the mouse over it but the titles doesnt appear :(
I´ve used this code:
.image-overlay {
background: #000000;
}
.grid-image:before {
content: attr(title);
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
text-align: center;
opacity: 1;
font-weight: 200;
font-size: 24px;
color: #ffffff !important;
top: 50%;
}
.grid-image:hover:before {
opacity: 0.1;
}
.grid-image:before{
transition: all linear 0.2s;
}
.grid-content {
display: none !important;
}

Thank you!