Gallery Grid: Hover on image – Show a same text over middle of image

To create a same text appear over Gallery Image on hover, like this.

You can use this code to Custom CSS box.

/* Gallery grid text hover */
.gallery-grid-item {
    position: relative;
    overflow: hidden;
}
.gallery-grid-item::after {
    content: 'By Nick Photographer';
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    font-size: 18px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    opacity: 0; 
    transition: opacity 0.3s ease; 
    pointer-events: none; 
}

.gallery-grid-item:hover::after {
    opacity: 1;
}