Zoom Image on Hover

If you want the image to zoom in while hovering over the event, just insert the following CSS. Go to: Event > Style > Custom CSS

Add:


/* Zoom Image on hover */
.eapp-events-calendar-grid-item-imageContainer img {
    transition: transform 1.0s ease-in-out !important;
}

.eapp-events-calendar-grid-item:hover .eapp-events-calendar-grid-item-imageContainer img {
    transform: scale(1.1) !important;
}

Customization:

Changing “transform 1.0s” to e.g. “transform 2.0s” slows the animation down.
Changing “scale(1.1)” to e.g. “scale(1.5)” increases the zoom depth.

3 Likes

This is fantastic, works like a charm :star_struck:

A huge thank you for sharing your solution!

1 Like