Image with Overlay
Great effects for images on hover

Overview

The Image with Overlay Element allows you to easily create stunning mouse over (or click or steady) effects on top of a image or lead to a more complex image explanation.

Usage Examples

  • Show messages on mouse over.
  • Or another image on top of the image on mouse over.
  • Add any content to the overlay you like.
  • Images with Content on top (You can also use backgrounds instead)
  • ..

Image with Overlay Properties

  1. Image: Choose the image for the Element. The Element matches the image size, so make to sure to use the right size or use the Media Manager to resize it. You can either upload a new image, use an existing one or insert the URL. Please make sure you have the permission and license to use the image. More information.
  2. Image Alternate Text: Add an alternative text for screen readers and search engines. (Required)
  3. Image Filter: Add an optional image filter (like greyscale, sepia...) to the image.
  4. Trigger Overlay on: Choose when the overlay should be shown. Default is on mouse over.
  5. Always show Overlay: Should the overlay always be shown. Tip: This is also useful for setting up the overlay content.
  6. Overlay Background: Choose between images, colors, gradients and patterns. By default a semi-transparent grey color is the default (rgba(0,0,0,0.6)) background. Tip: If you want to use a color background, use alpha transparency for a nice effect. Instead of using backgrounds you can also use the overlay content.
  7. Overlay Content: Add other elements directly to the overlay (hover over the image to access the dialog or use the Elements context menu).
Everything else, like styling, may be configured with common general properties. 
Mame Builder

See it in action

Mountains

Just a simple
text overlay

Mountains
A Grid with a Text and a Button.
Mountains

Displaying the Overlay
all the time

Generated HTML (Outline)


<div class="mame-element mame-image-overlay image-overlay" style="..">
   <img src="..." class=image-overlay__image" style="...">
   <div class="image-overlay__overlay" style="...">
      <div class="image-overlay__inner">
          <!-- Content -->
      </div>
    </div>
</div>

Style / CSS Selectors


.mame-image-overlay {
  /* All overlay elements */
}

.image-overlay__image {
  /* The Image */
} 

.image-overlay__overlay {
  /* The Overlay */
}

.image-overlay__inner {
  /* The Inner content of the overlay */
}

JavaScript

Image with Overlays are implemented in plain HTML 5 and CSS 3. They don't need any JavaScript to work properly.

Was this article helpful?