We use cookies to make your experience better. To comply with the new e-Privacy directive, we need to ask for your consent to set the cookies. Learn more.
CMS Banners
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
Content Overlay Image
Show content on hover
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.
Overlay color 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.
Overlay color and content on hover
Change ox-banner-link selector to div if you want to add mutliple buttons with different links in content.
Content Below Image
Animated Text Banner
Add class ox-banner-medium, ox-banner-big or ox-banner-huge for bigger text and paddings:
Overlay Banner Variations
Two Contents in Banner
Add class top or bottom to content container (ox-banner-container) for positioninng.
Banner and Image Stretch
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
