lots of variations

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

 
basketball
compare and shop
basketball
compare and shop
basketball
compare and shop
 

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.

 
limited time offer

SALE UP TO 50% OFF
on new collection

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

shop now

To Top