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:
<div class="ban">
<img class="image" src="{{media url="wysiwyg/infortis/banners/sample.jpg"}}" alt="Banner" />
</div>
HTML elements for banners
In our examples of banners and captions we are going to use a generic HTML element <div>
, but you can as well use a HTML5 element <figure>
for banners and <figcaption>
for caption.
Note that if you decide to use these elements, the <figcaption>
must be a direct child of the <figure>
. Also, the <figcaption>
must be its first or last child.
<figure class="ban">
<img class="image" src="{{media url="wysiwyg/infortis/banners/sample.jpg"}}" alt="Banner" />
<figcaption class="cap">
<h3>Caption Example</h3>
<p>This is a sample text</p>
</figcaption>
</figure>
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.
<a href="http://example.com">
<div class="ban">
<img class="image" src="{{media url="wysiwyg/infortis/banners/sample.jpg"}}" alt="Banner" />
</div>
</a>
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
.
<div class="ban ban-effect-1">
<img class="image" src="{{media url="wysiwyg/infortis/banners/sample.jpg"}}" alt="Banner" />
</div>
Below you can see more examples.
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:
<div class="ban">
<img class="image" src="{{media url="wysiwyg/infortis/banners/sample.jpg"}}" alt="Banner" />
<div class="cap"></div>
</div>
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:
<div class="ban">
<img class="image" src="{{media url="wysiwyg/infortis/banners/wide02.jpg"}}" alt="Banner" />
<div class="cap" style="background-color: rgba(135, 195, 30, 0.45);"></div>
</div>
-
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.
-
Add these classes to the banner element,
not to the caption element.
<div class="ban ban-caption-fade-out">
<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner1" />
<div class="cap" style="background-color: rgba(245, 88, 86, 0.75);"></div>
</div>
<div class="ban ban-caption-fade-in">
<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01-c.jpg"}}" alt="Banner2" />
<div class="cap" style="background-color: rgba(0, 0, 0, 0.85);"></div>
</div>
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:
<div class="ban">
<img class="image" src="{{media url="wysiwyg/infortis/banners/sample.jpg"}}" alt="Banner" />
<div class="cap">
<h2>Caption Example</h2>
<p>Create responsive banners in your Magento with ease. Add image, caption <br />and hover effects. Add any content inside banner caption.</p>
</div>
</div>
-
The default color of the overlay can be configured in the admin panel:
Theme Design > Colors
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
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.
<div class="ban">
<img class="image" src="{{media url="wysiwyg/infortis/banners/sample.jpg"}}" alt="Banner" />
<div class="cap" style="color: #000; background-color: rgba(255, 254, 84, 0.6);">
<h2 style="font-size: 32px;"><span class="ic ic-lightbulb"></span> Caption Example</h2>
<p style="font-size: 18px;">Create responsive banners in your Magento with ease.</p>
</div>
</div>
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:
<div class="ban ban-effect-1">
<img class="image" src="{{media url="wysiwyg/infortis/banners/sample.jpg"}}" alt="Banner" />
<div class="cap cap-no-bg">
<h2 style="font-size: 32px;"><span class="ic ic-star"></span> Caption Example</h2>
<p style="font-size: 18px;">Create responsive banners in your Magento with ease.</p>
</div>
</div>
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:
<a href="#">
<div class="ban ban-caption-fade-out">
<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
<div class="cap">
<h4>This caption will fade out on hover.</h4>
</div>
</div>
</a>
Below you can see examples of both effects:
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:
<div class="ban ban-effect-1 ban-caption-fade-out">
<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
<div class="cap cap-center-vertically cap-center-horizontally">
<h2>Caption Example</h2>
<p>Create responsive banners in your Magento with ease</p>
</div>
</div>
Default (not centered)
Center horizontally
Center vertically
Center vertically and horizontally
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:
<div class="ban ban-effect-1 ban-caption-fade-out">
<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
<div class="cap">
<div class="cap cap-center-vertically cap-center-horizontally cap-no-bg">
<h2>Caption Example</h2>
<p>Create responsive banners in your Magento with ease</p>
</div>
</div>
</div>
Below you can see examples of the inner caption element with and without the cap-no-bg
class:
Inner caption with cap-no-bg
Inner caption without cap-no-bg
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:
<a href="#">
<div class="ban ban-effect-1 ban-caption-fade-out">
<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
<div class="cap" style="background-color: rgba(91, 210, 236, 0.85);">
<div class="cap cap-center-vertically cap-center-horizontally cap-no-bg">
<span class="ic ic-zoomin ic-4x"></span>
</div>
</div>
</div>
</a>
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:
<div class="ban ban-effect-1 ban-caption-fade-out">
<img class="image" src="{{media url="wysiwyg/infortis/banners/sample02.jpg"}}" alt="Banner" />
<div class="cap cap-bottom">
<h3 class="no-margin">Caption Example</h3>
</div>
</div>
Below you can see examples of all available positions:
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:
cap-push-down-5
cap-push-down-10
cap-push-down-15
cap-push-down-20
cap-push-down-25
cap-push-down-30
cap-push-up-5
cap-push-up-10
cap-push-up-15
cap-push-up-20
cap-push-up-25
cap-push-up-30
cap-push-left-5
cap-push-left-10
cap-push-left-15
cap-push-left-20
cap-push-left-25
cap-push-left-30
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%.
<a href="#">
<div class="ban ban-effect-1">
<img class="image" src="{{media url="wysiwyg/infortis/banners/wide01.jpg"}}" alt="Banner" />
<div class="cap cap-push-up-20 cap-push-right-15" style="background-color: rgba(30, 195, 123, 0.7);">
<h2>Example of Banner Caption</h2>
<p>Create custom banners with captions</p>
</div>
</div>
</a>
Below you can see more examples of positioning.
down 10%, right 10%
Caption Example
down 10%, left 10%
Caption Example
right 10%
Caption Example
left 10%
Caption Example
up 10%, right 10%
Caption Example
up 10%, left 10%
Caption Example
Caption effects
To add eye-catching hover effects for the caption, add classes listed below to the banner element:
ban-caption-fade-out
ban-caption-fade-in
ban-caption-slide-up
ban-caption-slide-down
ban-caption-slide-left
ban-caption-slide-right
ban-caption-push-up
ban-caption-push-down
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:
<div class="ban ban-caption-hinge-up">
<img class="image" src="{{media url="wysiwyg/infortis/banners/sample01.jpg"}}" alt="Banner" />
<div class="cap">
<h3>Caption Example</h3>
<p>Create custom banners with captions</p>
</div>
</div>
Below you can see examples of all caption effects.
Fade
Slide
Push
Hinge
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:
<a href="#">
<div class="ban">
<img class="image" src="{{media url="wysiwyg/infortis/banners/sample.jpg"}}" alt="Banner" />
<div class="cap cap-no-bg cap-text-bg cap-text-bg-dark-3">
<h2 class="text">Caption Example</h2>
<p class="text">Create customizable banners with captions</p>
<p class="text">Responsive Magento theme</p>
</div>
</div>
</a>
Below you can see examples with different colors of text background.
Caption Example
Create customizable banners with captions
Responsive Magento theme
Caption Example
Create customizable banners with captions
Responsive Magento theme
Caption Example
Create customizable banners with captions
Responsive Magento theme
Caption Example
Create customizable banners with captions
Responsive Magento theme
Caption Example
Create customizable banners with captions
Responsive Magento theme
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: