The Image Mask widget uses transparent PNG masks to preview content in a highly dramatic way. Clicking on the mask or button reveals a hidden content block, complete with the full masked image and custom text.
Use the Image Mask widget to create powerful portfolios that are sure to engage site visitors. Stack multiple widgets at full browser width for a beautiful and easy-to-build full page panel style display of projects or past work. Choose from over 40 included mask shapes, or use your own!
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
Release Log
1.0: Initial release
Setup in Muse
Place the widget where you would like the image mask to appear on your site.
You may use the widget in any size you like, however, it is suggested to use the widget at full browser width.
Size the widget container to the height you would like the image mask panel background to be. The panel background will be a solid color. The sizing of the image mask itself is set within the option panel.
Open the widget option panel.
Background Image: This image sets the image seen behind the mask, as well as the image shown when the panel is expanded/opened. Note that since this image can be shown at full browser width (potentially), it is best to use a high resolution image. A common sizing would be 2000px wide, but best not to exceed 3000px.
Be sure to optimize your images to prevent long page load times! Use compression tools such as Tinyjpg.com or jpegmini.com
PNG Image Mask: This allows you to choose the image mask file to be used. There are 45 image mask files included with the widget. Find these in the "Image Masks" folder in the .zip package.
You may edit the included image mask files, or create your own. Use software such as Photoshop or Illuststrator to edit PNG files.
Mask Width/Height: These settings set the width and height of the mask. Note that this adjusts the mask only, and does not impact the background image whatsoever. The background image will always fill the space set by the widget container.
Panel Color: Sets the color of the panel. Note that for best appearance, this color should match the opaque portion of the PNG mask you use.
TITLE SETTINGS SECTION
Content Title: This title appears in the upper left corner of the panel when not expanded, and then in the center of the background image when the panel is expanded.
The remaining options in this section apply styling to the title font. These settings are self explanatory and will not be explained in further detail here. However, please note that there are separate font size options for the opened and unopened versions of the title.
CONTENT SETTINGS SECTION
Enable Content Block 1/2/3: These checkbox options allow you to enable each content block.
1st/2nd/3rd Content Block Text: Enter your content text here. You can use as much text as you like, up to the 2048 character limit allowed in a widget text field. Note that there is padding applied automatically between content blocks.
The remaining options in this section apply styling to the title font. These settings are self explanatory and will not be explained in further detail here.
BUTTON SETTINGS SECTION
Button Text (bottom right): This custom text determines what text will appear as the text in the bottom right of the panel. We refer to this text as a button, since it acts as a link to open the panel.
The remaining options in this section apply styling to the title font. These settings are self explanatory and will not be explained in further detail here.