Magento banners


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="&lbrace;&lbrace;media url="wysiwyg/infortis/banners/sample.jpg"&rbrace;&rbrace;" alt="Banner" />
 </div>
 

Banner


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="&lbrace;&lbrace;media url="wysiwyg/infortis/banners/sample.jpg"&rbrace;&rbrace;" 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="&lbrace;&lbrace;media url="wysiwyg/infortis/banners/sample.jpg"&rbrace;&rbrace;" 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- 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="&lbrace;&lbrace;media url="wysiwyg/infortis/banners/sample.jpg"&rbrace;&rbrace;" alt="Banner" />
 </div>
 

Banner


Below you can see more examples.



Zoom in


Banner

Zoom out


Banner