Skip to main content
Zoom effect
Elaine Bondoc avatar
Written by Elaine Bondoc
Updated over a week ago

Select elements can be targeted to have zoom effects via the site editor, by using CSS classes. More information about using CSS classes can be found in this article.

The CSS classes below can be used to give hover effect to your target content:

.zoom-effect .tile-image-wrapper img {
transform: scale(1);
transition: all 1s;
}

.zoom-effect:hover .tile-image-wrapper img {
transform: scale(1.2);
transition: all 1s;
}

You can definitely play around with the property values of the CSS classes above to achieve your preferred effect.

There are two ways to add a custom CSS so the site can use it:

Once the CSS class is available for use, you can then associate it to your target content via the site editor.

In the example below, the CSS classes are added in the site editor, and was applied to an image tile.

Did this answer your question?