SharePoint Online Classic - Increase size of promoted link tiles to 275px using CSS

My code has evolved, now the problem is that the description does show when hovering over the image. It only shows when hovering over the tile title.

Hover over image - description stops and shows partially

Hover over tile title - complete description shows 

My script:

<style type="text/css">
/* tile row height */
.ms-promlink-body {
height: 285px;
width: 870px;
}

/* tile dimensions, including space between tiles */
.ms-tileview-tile-root {
width: 285px !important;
height: 285px !important;
}

/* tile overlay dimensions - the standard blue background */
.ms-tileview-tile-content {
width: 275px !important;
height: 275px !important;
background-color:#0072c6 !important;
}

/* image dimensions */
.ms-tileview-tile-content img {
width:275px !important;
height:275px !important;
right:0px !important;
}

/* title and description overlay dimensions */
div.ms-tileview-tile-detailsBox {
width: 275px !important;
height: 275px !important;
top:200px !important;
}

div.ms-tileview-tile-detailsBox:hover{
width: 275px !important;
height: 275px !important;
top:0px !important;
}

/* title and description text */
.ms-tileview-tile-detailsListMedium {
height: 275px;
padding: 4px 7px 7px;
font-size: 14px;
line-height: 17px;
}

.ms-tileview-tile-titleMediumCollapsed {
height: 275px;
overflow: hidden;
vertical-align: bottom;
top: 275px !important;
}

/* title text when description not shown */
.ms-tileview-tile-titleTextMediumCollapsed {
width: 275px;
position: absolute !important;
top: 10px;
left: 0px;
padding: 0px 7px 4px 4px;
/* font-size: 14px; */
font-size: 16px;
line-height: 19px;
}
</style>