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

[vrmartin]

Promoted links are challenging. Removing one of the color codes made no difference. My problem seems to be with the div.ms-tileview-tile-detailsBox element. If I could get this to be transparent when at rest, my code would be “perfect” and yes, I tried setting background-color:transparent.

Here is my current code and any help is appreciated:

<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;
  }

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

  /*  title and description overlay dimensions */
div.ms-tileview-tile-detailsBox {
    width: 275px !important;
    height: 275px !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;
    height: 40px;
    position: absolute;
    top: 130px; 
    left: 0px;
    padding: 4px 7px;
    font-size: 14px;
    line-height: 17px;
    background-color: rgba(0, 0, 0, 0.3);
  }

 </style>

Thanks.