Прозрачный коврик-аккордеон на изображении

Question

У меня есть изображение, на котором мне нужен прозрачный мат-гармошка с черным фоном и текст с белым цветом. Я хочу, чтобы аккордеон был прозрачным на изображении.

Я пробовал с кодом ниже:

 <div fxLayout="row" fxLayout.xs="column">
          <div class = "promo" fxFlex="100%">
            <img [src]="inspectionDetailedImgUrl" width="100%" alt="Image" />
          </div>
          <div class="hilight" fxFlex.xs="100%">
            <mat-accordion>
              <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
                <mat-expansion-panel-header>
                  <mat-panel-title>
                    Header
                  </mat-panel-title>
                </mat-expansion-panel-header>
               <h1>Welcome</h1>
              </mat-expansion-panel>
            </mat-accordion>
          </div>
  </div>

Код CSS:

.promo {
    position: relative;
}
.promo img {
    z-index: 1;
}

.hilight {
    background-color: rgba(0,0,0,0.65);
    position: absolute;
    height: 85px;
    width: 415px;
    font-family: Verdana, Geneva, sans-serif;
    color: #FFF;
    z-index: 1;
   }

Заранее спасибо.