Add an image hover caption to my portfolio thumbs in Wordpress

I require a very simple hover effect for my Wordpress portfolio page's thumbnails. The hover effect needs to appear on the bottom of the image and take up 20% of the bottom of the image and fill it horizontally. The overlay should be black with around 80% opacity. The hover effect then needs to take the title from the related post title and the sub-heading from a custom meta field in the relevant post. I need to be able to style these two text elements myself so they will need a class/id each. I have attached an image of what the hovered image should look like. I will provide the live domain of the site once the project is accepted and can provide wordpress access if required. This is such a standard effect that I believe this to be a very easy/small job.