Text on Image Hover

I’m using WordPress 4.4.2 and a child theme of TwentyTwelve.

The page that I’m having trouble with is https://www.gnarledcarrots.com/caramel-frosting/

I’m trying to add a “More Recipes Like This” section at the bottom of the page. I’ve added images in HTML and edited the CSS to make the image partially transparent and have text appear when you scroll over it. However, I’m struggling to figure out how to get the text centered vertically and to add more padding.

Also, is there a way to make the image fade more white than more black? The image gets darker when you scroll over it. I’m wondering if I can get it to fade lighter.

HTML:

<div style="width:115px;float:left;padding-bottom:15px;margin:7.5px 7.5px 7.5px 7.5px;overflow-x:auto;"><b><a href="https://www.gnarledcarrots.com/caramel-sauce/" class="hovertext" href="#" title="Caramel Sauce"><img src="https://www.gnarledcarrots.com/wp-content/uploads/2016/02/IMG_3959-copy.jpg" width="115" height="115"></a></b></div>

CSS:

a.hovertext {
    position: relative;
    width: 115px;
    text-align: center;
  }
  a.hovertext:after {
    content: attr(title);
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 115px;
	height: 115px;
    background: rgba(0,0,0,0.5);
    color: white;
    opacity: 0;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
  }
  a.hovertext:hover:after, a.hovertext:focus:after {
    opacity: 1.0;
  }