Zoom on Hover

• About
• Product listing
• CSS helper
• LESS mixin
• LESS variables

About

Zoom on hover adds nice zoom effect for all elements with hover-zoom css class.

Source Code:

• CSS helper
• LESS mixin
• LESS variables

Product listing

To enable zoom on hover for product items, use the following code:

@listing-grid-item__zoom-on-hover: true;

CSS helper

Usage example:

<a href="..." class="rounded hover-zoom"><img src="..."/></a>

You can also add hover-zoom class for pagebuilder Slide and Banner elements with background image and zoom will work for its background too!

LESS mixin

.selector {
    overflow: hidden;
    .zoom-on-hover();
}

LESS variables

@zoom-on-hover__transition: transform 600ms cubic-bezier(0.35, 0, 0.05, 1);
@zoom-on-hover__transform: scale(1.05);