Change promoted tile hover over size

Question

I want move the opaque black mouse over hover tile in promoted links lower down as it is covering my images in the tile (user pictures).

Ideally I would like to increase the opacity so that only the text is seen and not the tile. Currently using CSS to style the tile so if it can be done with CSS then that would be great.

  <style>
  .ms-promlink-body {
max-width:100%;
}
.ms-promlink-headerNav {
display: none;
}
.ms-tileview-tile-content,.ms-tileview-tile-detailsBox,  .ms-tileview-tile-content > a > div > span {


height:150px !important;

width:150px !important;

}
.ms-tileview-tile-content > a > div > img {

max-width:100%;

width:100% !important;

}

.ms-tileview-tile-content img {width: 160px; height: 160px;}

ul.ms-tileview-tile-detailsListMedium {

height:160px;

padding:0;

}    
.ms-tileview-tile-titleTextMediumCollapsed{

filter: alpha(opacity=100);
opacity: 1;
color:#FFFFFF;
    width: 150px;
    height: 29px;
    position: absolute;
    top: 33px;
    left: 0px;
    padding: 0px 2px 2px;
    font-size: 16px;
font-weight:bold !important;
    line-height: 16px;
}

.ms-tileview-tile-descriptionMedium, .ms-tileview-tile-titleTextMediumExpanded {
    font-size: 16px;
font-weight:bold !important;
}
</style>

Answer 1

Change the background-color property for the below classes:

div.ms-tileview-tile-titleTextMediumCollapsed
.ms-tileview-tile-detailsBox

The background-color for both these classes is rgba( 0,0,0,0.6 ) by default. Reducing the last value (0.6) changes the opacity.

I have tested this on the promoted links list and it works fine.