Buy me a coffee

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.

Gallery Grid Hover On Image Show A Heart Icon Over Image 1 Min

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 */
}

Gallery Grid Hover On Image Show A Heart Icon Over Image 2 Min