Banners with image, caption and hover effects

Image banners can be useful in many different places in your Magento store. You can place banners just about anywhere using simple markup. With additional utility classes you can easily add caption and multiple hover effects to your banners.

Simple image banner

The image and the entire content of the banner is wrapped inside an element with the ban class. The image needs to be marked with the image class. Here's a minimal example to create a simple banner:

Banner with hyperlink

To create a banner with a hyperlink to other pages (or to locations within the same page), wrap the banner inside the anchor element <a>. Inside the href="" attribute put a URL that the hyperlink points to. You can wrap the entire banner, or only the caption.

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.

Zoom in

Zoom out

Rotate

Fade out

Blur in

Blur out

Grayscale in

Grayscale out

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: <div class="cap"></div>. The empty caption element will be displayed as a color overlay. Here's an example:

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:

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

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.

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:

Caption Example

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

Inline styles

If you want to change the style of the caption, e.g. change the font size or the color, you can do it with inline CSS styles. Add the style attribute to the caption element and specify values of selected properties such as font-size, font-family, color, background-color etc.

In the example below, we override the default values of the color and the background-color properties of the caption element and the font-size property of <h2> and <p> elements. To make the background color semi-transparent, use the rgba() functional notation.

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.

Fade out

Fade in

Center caption

To center the caption horizontally, add the cap-center-horizontally class to the caption element. To center the caption vertically, add the cap-center-vertically class to the caption element. Both classes can be used together.

Here's a code example of a caption centered vertically and horizontally:

Default (not centered)

Caption Example

Center horizontally

Caption Example

Center vertically

Caption Example

Create responsive banners in your Magento with ease

Center vertically and horizontally

Caption Example

Create responsive banners in your Magento with ease

Center vertically, full cover

When the caption is centered vertically, if you want the caption to cover the entire banner, you need to use two nested caption elements. The inner caption element needs to have the cap-center-vertically class. The additional cap-no-bg class will remove the background color from the inner caption element.

Here's the code example of the inner caption element without the background color:

Caption Example

Caption Example

Caption Example

Caption Example

Caption Example

Caption Example

Caption Example

Caption Example

Caption Example

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%.

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: