Gallery Grid: Hover on Image – Show a Heart icon over Image

If you want to make heart icon appears when hovering on each image in Gallery Grid Simple. Like this.

You can use this code to Custom CSS box.

/* Gallery Grid - Heart Icon */
.gallery-grid-item {
    position: relative;
}

.gallery-grid-item::before {
    content: '\2764'; /* Unicode for the heart symbol */
    font-size: 40px;  /* Adjust size as needed */
    color: white;     /* Heart color */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Prevent any interaction with the pseudo-element */
    z-index: 999;
}
.gallery-grid-item:hover::before {
    opacity: 1; /* Show the heart icon on hover */
}