My hover doesn't work at all. I need my element to only show up when I hover over it, but I can't get it to work.

I don't know if it's necessary to replace the i tag with an a, or if the error is in the css. I also tried with display: none and display: block, but the problem still doesn't solve. What can it be?

My html:

                        <div class="vertical-line"></div>
                        <div>
                            <h4>{{ banner.textPrimary }}</h4>
                        </div>
                        <div>
                            <h2>{{ banner.textSecondary }}<br /></h2>
                        </div>
                        <div class="vertical-line"></div>

                        <div>
                            <a href="{{ banner.buttonLink }}" target="_blank">
                                <button
                                    [style.background-color]="banner.buttonColor"
                                    style="border: solid 1px"
                                    class="btn-about-us"
                                    mat-raised-button
                                    color="primary"
                                >
                                    {{ banner.buttonText }}
                                </button>
                            </a>
                        </div>
                    </div>
                    <i
                    (click)="openBannerDeleteModal(banner.uuid)"
                    *ngIf="isAdminFlag === 'true'"
                    class="fas fa-trash-alt delete-modal"
                    id="banner-delete"
                    aria-hidden="true"
                ></i>

And my css:

.delete-modal{
    cursor: pointer;
    position: absolute;
    bottom: 80%;
    left: 91%;
    z-index: 1000;
    visibility: hidden;
}

.delete-modal:hover{
   visibility: visible;
}