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:
HTML elements for banners
In our examples of banners and captions we are going to use a generic HTML element Note that if you decide to use these elements, the This is a sample text To create a banner with a hyperlink to other pages (or to locations within the same page), wrap the banner inside the anchor element To add a hover effect to the banner, add an effect class to the banner (to the element with the Below you can see more examples. 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 To change the color of the overlay, add an inline CSS to the caption element to override the default value of its By default the color overlay (the caption element) covers the banner all the time. But you can change it with two useful classes. The Below you can see more examples. To create a caption for the banner, add an element with the Create responsive banners in your Magento with ease. Add image, caption Create responsive banners in your Magento with ease. Add image, caption You can extend this simple example with additional features: 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 In the example below, we override the default values of the Create responsive banners in your Magento with ease. Create responsive banners in your Magento with ease. To get rid of the background color from the caption, add the Create responsive banners in your Magento with ease. Create responsive banners in your Magento with ease. By default the caption element covers the banner all the time. But you can change it with two useful classes. The Here's a code example of a caption with fade out effect: Below you can see examples of both effects: To center the caption horizontally, add the Here's a code example of a caption centered vertically and horizontally: Create responsive banners in your Magento with ease Create responsive banners in your Magento with ease Create responsive banners in your Magento with ease Create responsive banners in your Magento with ease Create responsive banners in your Magento with ease 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 Here's the code example of the inner caption element without the background color: Create responsive banners in your Magento with ease Below you can see examples of the inner caption element with and without the Create responsive banners in your Magento with ease Create responsive banners in your Magento with ease 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: To set the position of the caption, use the following classes: Here's a code example of a caption placed at the bottom of the banner: Below you can see examples of all available positions: 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 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. To add eye-catching hover effects for the caption, add classes listed below to the banner element: Here's a code example of a banner with caption "hinge up" effect: Create custom banners with captions Below you can see examples of all caption effects. Create custom banners with captions Create custom banners with captions Create custom banners with captions Create custom banners with captions Create custom banners with captions Create custom banners with captions Create custom banners with captions Create custom banners with captions Create custom banners with captions Create custom banners with captions Create custom banners with captions Create custom banners with captions 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 2. Add these two classes to the caption element: 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): Here's an example of a caption with dark text background: Below you can see examples with different colors of text background. Create customizable banners with captions Responsive Magento theme Create customizable banners with captions Responsive Magento theme Create customizable banners with captions Responsive Magento theme Create customizable banners with captions Responsive Magento theme Create customizable banners with captions Responsive Magento theme Create customizable banners with captions Responsive Magento theme 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:
Caption Example
Banner with hyperlink
. 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
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
cap class inside the banner: . The empty caption element will be displayed as a color overlay. Here's an example:
Color of the overlay
background-color property. You can add semi-transparent color using the rgba() functional notation allowing specification of the opacity of a color. For example:
Theme Design > Colors
Color overlay with fade in/out effect
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.
not to the caption element.
Custom color and transparency level
Examples of banners with combined hover effect and color overlay
Banner with caption
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
and hover effects. Add any content inside banner caption.
Theme Design > Colors
Caption Example
and hover effects. Add any content inside banner caption.
Inline styles
style attribute to the caption element and specify values of selected properties such as font-size, font-family, color, background-color etc.color and the background-color properties of the caption element and the font-size property of and elements. To make the background color semi-transparent, use the rgba() functional notation.
Caption Example
Caption Example
Remove caption background color
cap-no-bg class to the caption element. This will make the caption element transparent, only the text will be visible over the banner:
Caption Example
Caption Example
Caption with fade in/out effect
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.
not to the caption element.
Center caption
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.
Caption Example
Default (not centered)
Caption Example
Center horizontally
Caption Example
Center vertically
Caption Example
Center vertically and horizontally
Caption Example
Center vertically, full cover
cap-center-vertically class. The additional cap-no-bg class will remove the background color from the inner caption element.
Caption Example
cap-no-bg class:
Inner caption with
cap-no-bg
Caption Example
Inner caption without
cap-no-bg
Caption Example
Vertically centered icon
Caption - positioning
cap-top, cap-bottom, cap-left, cap-right, cap-top-left, cap-top-right, cap-bottom-left, cap-bottom-right.
Caption Example
Caption Example
Caption Example
Caption Example
Caption Example
Caption Example
Caption Example
Caption Example
Caption Example
Caption Example
Caption Example
Caption - precise positioning
cap-push-down-10 class will push the caption down by 10%. Here's the list of all available classes:
cap-push-down-5cap-push-down-10cap-push-down-15cap-push-down-20cap-push-down-25cap-push-down-30
cap-push-up-5cap-push-up-10cap-push-up-15cap-push-up-20cap-push-up-25cap-push-up-30
cap-push-left-5cap-push-left-10cap-push-left-15cap-push-left-20cap-push-left-25cap-push-left-30
cap-push-right-5cap-push-right-10cap-push-right-15cap-push-right-20cap-push-right-25cap-push-right-30
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
ban-caption-fade-outban-caption-fade-in
ban-caption-slide-upban-caption-slide-downban-caption-slide-leftban-caption-slide-right
ban-caption-push-upban-caption-push-down
ban-caption-hinge-upban-caption-hinge-downban-caption-hinge-leftban-caption-hinge-right
not to the caption element.
Caption Example
Fade
Caption Example
Caption Example
Slide
Caption Example
Caption Example
Caption Example
Caption Example
Push
Caption Example
Caption Example
Hinge
Caption Example
Caption Example
Caption Example
Caption Example
Caption with text background
text class.
cap-no-bg class which removes the background color from the caption elementcap-text-bg class which adds the background color to text blocks
cap-text-bg-dark-1cap-text-bg-dark-2cap-text-bg-dark-3cap-text-bg-light-1cap-text-bg-light-2cap-text-bg-light-3
Caption Example
Caption Example
Caption Example
Caption Example
Caption Example
Caption Example
Text background inside a link
Caption with complex content
Countdown to June 17, 2026
See Sony’s Latest Mini-LED Surgical Displays at WHX Miami
Ampronix is proud to partner with Sony Medical as Master Distributor for Sony Medical Monitors. Join us at WHX Miami to experience Sony’s latest 4K HDR Mini-LED surgical visualization technology.
Miami Beach Convention Center
Meet with Dennis Mairena
Featured Sony Surgical Monitors
See Sony’s latest 4K HDR Mini-LED surgical monitor lineup at Booth K62, including the LMD-27M1MD, LMD-32M1MD, and LMD-43M1MD.
LMD-27M1MD
Compact Mini-LED surgical visualization for sharp imaging, efficient OR integration, and advanced 4K HDR performance.
LMD-32M1MD
Premium Mini-LED surgical display engineered for brightness, contrast, color precision, and advanced surgical visualization.
LMD-43M1MD
Large-format Mini-LED surgical display designed for enhanced visibility, collaboration, and immersive OR viewing environments.
Plan Your Visit to Booth K62
Meet with Ampronix and Sony Medical at WHX Miami to discuss Sony M1 surgical displays, availability, distribution opportunities, and your surgical monitor requirements.
Schedule Your MeetingTell Us About Your Project
Our team is here to help you source, replace, or repair the equipment you need. Reach out today, or complete the form, and our team will contact you shortly.
- Choosing a selection results in a full page refresh.
- Opens in a new window.