You can add various hover animations by adding following classes to banner wrapper:
ox-zoom-hover orox-zoom-out-hover - to zoom the whole banner on hover or out.
ox-img-zoom-hover or ox-img-zoom-out-hover - to zoom only image on banner hover or out.
Align Content in banner by adding following classes (horizontal and vertical): h-center, h-left, h-right, v-bottom, v-top, v-center
Add class ox-show-hover to hide element and show it on hover.
Additionally add class ox-moveup-hover animate it from bottom on hover.
Add div with class overlay-layer inside ox-banner-link to add overlay layer
and class overlay-hover to banner wrapper for hover overlay animation.
Change ox-banner-link selector to div if you want to add mutliple buttons with different links in content.
Add class ox-banner-medium, ox-banner-big or ox-banner-huge for bigger text and paddings:
Add class top or bottom to content container (ox-banner-container) for positioninng.
Add class banner-stretch and banner-stretch-v or banner-stretch-vertical to banner wrapper to fit stretch banner to fit container size.
Add class image-cover to banner wrapper to name image cover banner container even if it is smaller than banner.
You can use all these classes together. Example below or on Sport Category
