We're taking orders & delivering as normal but please do call or email to check stock first. Read more...




Banner

Caption Example


Banner

Caption Example

This is a sample text



You can extend this simple example with additional features:

  • by adding more of the predefined CSS classes
  • by adding more HTML inside the caption

Banner

Caption Example

This is a sample text


Banner with image hover effect

To add a hover effect to the banner, add an effect class to the banner (to the element with the ban class). The following classes are available: ban-effect-1, ban-effect-2, ban-effect-3, ban-effect-fade-out, ban-effect-grayscale-in, ban-effect-grayscale-out, ban-effect-blur-in, ban-effect-blur-out.



Banner

Banner


Below you can see more examples.



Zoom in


Banner

Zoom out


Banner

Rotate


Banner

Fade out


Banner

Blur in


Banner

Blur out


Banner

Grayscale in


Banner

Grayscale out


Banner




Banner with color overlay

To add a color overlay to the banner, add a caption but without any text. Captions are described later on this page, but in this section we will only use an empty caption element.

To add an empty caption to the banner, simply add an element with the cap class inside the banner: . The empty caption element will be displayed as a color overlay. Here's an example:



Banner

Banner


Color of the overlay


To change the color of the overlay, add an inline CSS to the caption element to override the default value of its background-color property. You can add semi-transparent color using the rgba() functional notation allowing specification of the opacity of a color. For example:



Banner
  • The default color of the overlay can be configured in the admin panel:
    Theme Design > Colors


Banner


Color overlay with fade in/out effect


By default the color overlay (the caption element) covers the banner all the time. But you can change it with two useful classes. The ban-caption-fade-out class will make the overlay fade out on mouse hover over the banner. And the ban-caption-fade-in class will make the overlay fade in only on mouse hover over the banner.


  • Add these classes to the banner element,
    not to the caption element.


Banner1
Banner2



Below you can see more examples.



Custom color and transparency level




Examples of banners with combined hover effect and color overlay






Banner with caption

To create a caption for the banner, add an element with the cap class inside the banner. Inside the caption you can add any text elements, such as headings or paragraphs of text. The caption will be displayed over the image with a color overlay (background color). Here's an example:



Banner

Caption Example

Create responsive banners in your Magento with ease. Add image, caption
and hover effects. Add any content inside banner caption.

  • The default color of the overlay can be configured in the admin panel:
    Theme Design > Colors


Banner

Caption Example

Create responsive banners in your Magento with ease. Add image, caption
and hover effects. Add any content inside banner caption.



You can extend this simple example with additional features:

  • by adding more of the predefined CSS classes to the banner and the caption element
  • by adding more HTML (e.g. icons) inside the caption

Banner

Caption Example

Create responsive banners in your Magento with ease.


Banner

Caption Example

Create responsive banners in your Magento with ease.



Remove caption background color


To get rid of the background color from the caption, add the cap-no-bg class to the caption element. This will make the caption element transparent, only the text will be visible over the banner:



Banner

Caption Example

Create responsive banners in your Magento with ease.


Banner

Caption Example

Create responsive banners in your Magento with ease.



Caption with fade in/out effect


By default the caption element covers the banner all the time. But you can change it with two useful classes. The ban-caption-fade-out class will make the caption fade out on mouse hover over the banner. And the ban-caption-fade-in class will make the caption fade in on mouse hover over the banner.

  • Add these classes to the banner element,
    not to the caption element.

Here's a code example of a caption with fade out effect:



Below you can see examples of both effects:




Banner

Caption Example

Create responsive banners in your Magento with ease



Default (not centered)


Banner

Caption Example

Create responsive banners in your Magento with ease


Center horizontally


Banner

Caption Example

Create responsive banners in your Magento with ease


Center vertically


Banner

Caption Example

Create responsive banners in your Magento with ease


Center vertically and horizontally


Banner

Caption Example

Create responsive banners in your Magento with ease




Banner

Caption Example

Create responsive banners in your Magento with ease


Below you can see examples of the inner caption element with and without the cap-no-bg class:



Inner caption with cap-no-bg


Banner

Caption Example

Create responsive banners in your Magento with ease


Inner caption without cap-no-bg


Banner

Caption Example

Create responsive banners in your Magento with ease



Vertically centered icon


To create a banner with an icon aligned exactly in the center of the banner, make the caption element centered vertically and horizontally and add an icon inside the inner caption element:



Below you can see some examples of banners with an icon aligned in the center:




Caption - positioning


To set the position of the caption, use the following classes: cap-top, cap-bottom, cap-left, cap-right, cap-top-left, cap-top-right, cap-bottom-left, cap-bottom-right.

Here's a code example of a caption placed at the bottom of the banner:



Banner

Caption Example


Below you can see examples of all available positions:


Banner

Caption Example

Banner

Caption Example

Banner

Caption Example

Banner

Caption Example

Banner

Caption Example

Banner

Caption Example

Banner

Caption Example

Banner

Caption Example

Banner

Caption Example

Banner

Caption Example



Caption - precise positioning


To position the caption with more precision, you can use the classes presented below. The number at the end of each class name indicates the value (percentage) by which the caption will be moved in the selected direction. In the vertical direction the percentage is calculated with respect to the height of the entire banner. In the horizontal direction the percentage is calculated with respect to the width of the entire banner.

For example, the cap-push-down-10 class will push the caption down by 10%. Here's the list of all available classes:


Push down:
  • cap-push-down-5
  • cap-push-down-10
  • cap-push-down-15
  • cap-push-down-20
  • cap-push-down-25
  • cap-push-down-30
Push up:
  • cap-push-up-5
  • cap-push-up-10
  • cap-push-up-15
  • cap-push-up-20
  • cap-push-up-25
  • cap-push-up-30
Push left:
  • cap-push-left-5
  • cap-push-left-10
  • cap-push-left-15
  • cap-push-left-20
  • cap-push-left-25
  • cap-push-left-30
Push right:
  • cap-push-right-5
  • cap-push-right-10
  • cap-push-right-15
  • cap-push-right-20
  • cap-push-right-25
  • cap-push-right-30

Below you can see an example of a caption which is pushed up by 20% and pushed right by 15%.




Below you can see more examples of positioning.



down 10%, right 10%


Banner

Caption Example


down 10%, left 10%


Banner

Caption Example


right 10%


Banner

Caption Example


left 10%


Banner

Caption Example


up 10%, right 10%


Banner

Caption Example


up 10%, left 10%


Banner

Caption Example



Caption effects


To add eye-catching hover effects for the caption, add classes listed below to the banner element:


Fade:
  • ban-caption-fade-out
  • ban-caption-fade-in
Slide:
  • ban-caption-slide-up
  • ban-caption-slide-down
  • ban-caption-slide-left
  • ban-caption-slide-right
Push:
  • ban-caption-push-up
  • ban-caption-push-down
Hinge:
  • ban-caption-hinge-up
  • ban-caption-hinge-down
  • ban-caption-hinge-left
  • ban-caption-hinge-right

  • Add these classes to the banner element,
    not to the caption element.

Here's a code example of a banner with caption "hinge up" effect:



Banner

Caption Example

Create custom banners with captions


Below you can see examples of all caption effects.


Fade


Banner

Caption Example

Create custom banners with captions

Banner

Caption Example

Create custom banners with captions


Slide


Banner

Caption Example

Create custom banners with captions

Banner

Caption Example

Create custom banners with captions

Banner

Caption Example

Create custom banners with captions

Banner

Caption Example

Create custom banners with captions


Push


Banner

Caption Example

Create custom banners with captions

Banner

Caption Example

Create custom banners with captions


Hinge


Banner

Caption Example

Create custom banners with captions

Banner

Caption Example

Create custom banners with captions

Banner

Caption Example

Create custom banners with captions

Banner

Caption Example

Create custom banners with captions



Vertically centered icon


When the caption is centered vertically, add an icon inside the inner caption element:



Below you can see more examples with icons:


-->

Caption with text background


To create a caption with background color behind each block of text, you need to make a few steps:

1. Mark each block of text inside the caption element with the text class.

2. Add these two classes to the caption element:

  • cap-no-bg class which removes the background color from the caption element
  • cap-text-bg class which adds the background color to text blocks

3. Add one of these classes to the caption element to choose the tone of the text background - dark (semi-transparent black) or light (semi-transparent white):

  • cap-text-bg-dark-1
  • cap-text-bg-dark-2
  • cap-text-bg-dark-3
  • cap-text-bg-light-1
  • cap-text-bg-light-2
  • cap-text-bg-light-3

Here's an example of a caption with dark text background:




Below you can see examples with different colors of text background.



Banner

Caption Example

Create customizable banners with captions

Responsive Magento theme

Banner

Caption Example

Create customizable banners with captions

Responsive Magento theme

Banner

Caption Example

Create customizable banners with captions

Responsive Magento theme

Banner

Caption Example

Create customizable banners with captions

Responsive Magento theme

Banner

Caption Example

Create customizable banners with captions

Responsive Magento theme

Banner

Caption Example

Create customizable banners with captions

Responsive Magento theme


Text background inside a link




Caption with complex content


Inside the caption you can add any text elements, such as headings or paragraphs of text. You can also make it more complex by adding more elements inside the caption element, for example, a block of text with an icon and hover effect: